depentencies error when installing in react 18

[kordou]

hi

is thre any way to install it with react 18 ?

[elegrafit]

I have the same problem

[j-era]

Hi, the current version uses react@18.2.0. Could you please provide more information (like error logs). Did you try running the example?

[j-era]

See https://codesandbox.io/s/jolly-hodgkin-ssu33

[dw-herrmann]

@j-era, I downloaded your example, run npm install, then npm run start and I receive the same error as in my project:

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
    at ar-threex.js:1:1
    at ar-threex.js:1:1
    at ar-threex.js:1:1
    at ar-threex.js:1:1
    at ./node_modules/@ar-js-org/ar.js/three.js/build/ar-threex.js (ar-threex.js:1:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@artcom/react-three-arjs/lib/ar/arMarker.js (arMarker.jsx:3:1)
    at options.factory (react refresh:6:1)

[j-era]

Ah right, you' re trying with the example which relates to the development setup:

react-three-arjs/example/package.json

Line 41 in 043e8a5

"@artcom/react-three-arjs": "file:..",

To run the example you can either, set the npm package version: "@artcom/react-three-arjs": "0.5.6" or run npm install and npm run build in the root folder before running the example.

I'll add it to the README.

[j-era]

https://github.com/artcom/react-three-arjs/blob/main/example/README.md

[dw-herrmann]

Thank you! The example runs now on my pc.

I also tried to install a pure installation of react (npx create-react-app ar-test) and added react-three-arjs (npm install @artcom/react-three-arjs). As soon as I import the library (import { ... } from "@artcom/react-three-arjs"), the error (Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') ...) appears in the console.

Do I miss something in the installation?

[j-era]

Did you try 0.5.6?

[dw-herrmann]

My package.json dependencies:

"dependencies": {
    "@artcom/react-three-arjs": "^0.5.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},

I changed the version to 0.5.6, by default npm install @artcom/react-three-arjs installs 0.5.5.
The error still appears.

[j-era]

Never worked with create-react-app before, but I run into the same error. For now I suggest starting from the example project.
(0.5.6 is still published as beta, so you have to set it explicitly for now)

[dw-herrmann]

All right, thank you very much for your help!

[loganknecht]

Hello!

I am experiencing this issue as well.
I'm using create-react-app and don't know what to do.
I would prefer not to start over for my project as I have a bit of development already done and don't want to rebuild it from scratch with the example.

Is there a solution for this?

My package.json is this

{
    "name": "constellation",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "@ar-js-org/ar.js": "^3.4.5",
        "@artcom/react-three-arjs": "^0.5.6",
        "@react-three/drei": "^9.88.2",
        "@react-three/fiber": "^8.14.5",
        "@react-three/xr": "^5.7.1",
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.5.2",
        "@types/node": "^16.18.58",
        "@types/react": "^18.2.28",
        "@types/react-dom": "^18.2.13",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "three": "^0.157.0",
        "typescript": "^4.9.5",
        "web-vitals": "^2.1.4"
    },
    "scripts": {
        "build": "react-scripts build",
        "dev": "export $(cat ../continuous_integration/environment_variables/localhost.env | sed '/^#/d' | xargs); react-scripts start",
        "eject": "react-scripts eject",
        "test": "react-scripts test"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
        "@types/three": "^0.157.0"
    }
}

The output I get is this