Issues related to react 18 Upgrade

I am using React 17 and react-babylonjs library (version 3.0.1) and my application is working fine. I wanted to upgrade my app to React 18. To do that, i have updated all Babylon libs like core/gui to its latest version and upgrade react-babylonJs to 3.1.11 in my package.json.

By doing that, I am getting so many Errors while starting my servers. and All are related to Unknown Property Found.

Line 266:9: Unknown property ‘roughness’ found react/no-unknown-property
Line 267:9: Unknown property ‘emissiveColor’ found react/no-unknown-property
Line 268:9: Unknown property ‘specularColor’ found react/no-unknown-property

Line 379:9: Unknown property ‘position’ found react/no-unknown-property
Line 380:9: Unknown property ‘rotation’ found react/no-unknown-property
Line 381:9: Unknown property ‘ellipsoid’ found react/no-unknown-property
Line 382:9: Unknown property ‘ellipsoidOffset’ found react/no-unknown-property
Line 383:9: Unknown property ‘minZ’ found react/no-unknown-property
Line 384:9: Unknown property ‘checkCollisions’ found react/no-unknown-property
Line 385:9: Unknown property ‘applyGravity’ found react/no-unknown-property
Line 387:9: Unknown property ‘angularSensibility’ found react/no-unknown-property
Line 388:9: Unknown property ‘fov’ found react/no-unknown-property
Line 389:9: Unknown property ‘touchAngularSensibility’ found react/no-unknown-property

@brianzinn - FYI… May be you can help here.

looks like you just need to restart your VS Code to get the IntrinsicElements reset? Otherwise can you share those lines of code? Thanks. Also, feel free to post an issue in library:
Issues · brianzinn/react-babylonjs (github.com)

There were lots of fixes put in recently for React 18. There is a working typescript example running here on React 18.2.0:
brianzinn/create-react-app-typescript-babylonjs: BabylonJS + TypeScript + Create React App Starter Kit (github.com)

Cheers.

2 Likes

Hi Brian,

I have restarted VSCode and but it is still showing those issues. Sharing the screenshot

Can you share a repro or a package.json? It’s working for me…

It’s weird that some are not complaining, especially since position is required…

Couldn’t share repo but here is the package.json.

“version”: “1.9.6”,
“private”: true,

“dependencies”: {
@babylonjs/core”: “^5.25.0”,
@babylonjs/gui”: “^5.25.0”,
@babylonjs/loaders”: “^5.25.0”,
@babylonjs/materials”: “^5.25.0”,
@rollup/plugin-babel”: “^5.3.1”,
“axios”: “^0.27.2”,
“hls.js”: “^1.1.5”,
“lottie-react”: “^2.3.1”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-babylonjs”: “^3.1.11”,
“react-jss”: “^10.9.0”,
“react-redux”: “^8.0.4”,
“react-scripts”: “5.0.1”,
“tailwind-scrollbar-hide”: “^1.1.7”,
“web-vitals”: “^2.1.4”
},
“scripts”: {
“start”: “HTTPS=true react-scripts start”,
“build”: “react-scripts build”,
“local”: “react-scripts start”,
“test”: “echo ‘No tests yet, when ready change package.json test command to "npm test --watchAll=false"’”,
“eject”: “react-scripts eject”,
“format”: “prettier --config .prettierrc ‘src/**/*’ --write”,
“release”: “node …/…/…/.github/scripts/publish-version.js”,
“version”: “echo "Nothing to do"”
},
“eslintConfig”: {
“extends”:
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
},
“devDependencies”: {
@reduxjs/toolkit”: “^1.8.1”,
@testing-library/dom”: “^8.11.0”,
@testing-library/jest-dom”: “^5.16.4”,
@testing-library/react”: “^13.3.0”,
@testing-library/user-event”: “^13.5.0”,
@types/jest”: “^27.5.2”,
@types/node”: “^16.11.28”,
@types/react”: “^18.0.6”,
@types/react-dom”: “^18.0.2”,
@types/react-redux”: “^7.1.24”,
@typescript-eslint/eslint-plugin”: “^5.31.0”,
“autoprefixer”: “^10.4.5”,
“eslint”: “^7.11.0”,
“eslint-config-prettier”: “^8.3.0”,
“eslint-plugin-prettier”: “^4.0.0”,
“eslint-plugin-react”: “^7.26.1”,
“postcss”: “^8.4.12”,
“prettier”: “^2.4.1”,
“tailwindcss”: “^3.0.24”,
“typescript”: “^4.6.3”
}
}

Just a note - these all are Eslint Issues. and why these issues are coming only for properties like position, rotation but not for target

oh - i hadn’t seen that. would seem that your eslint isn’t picking up on the JSX.IntrinsicElement correctly - it is finding the elements though. Did you try to clean your node_modules folder? It just looks like a caching issue, so I don’t know how to reproduce. My test repositories are all working and I use eslint and also with typescript…

Thanks Brian for reply. I already removed node_modules and package-lock and tried everything. I have updated to latest Eslint & Eslint-plugin-react modules. Couple of things to see

  1. This is happening only with React 18. It is working charm with React 17.
  2. Can you share your node version ? I am using 16.13
  3. Can u share your test repo with Eslint configs too ?

Thanks for all the help that you are doing !!

$ node --version
v16.13.2

Let me add eslint to one of the public repos, since I only have it on private ones. are you on TypeScript or JavaScript?

edit: i see TS in your devDependencies just not 100% sure.

Typescript… Even i have the same node version

are you using a plugin to highlight? if so, does it lint from command line?

Brian,
Issue is occuring when you are creating Production Build… npm run build. In normal dev build, this issues comes to first time and then in the next npm run start , Application works well in local… But in our Dev environment, it doesn’t work because on DEV we create production build.

Can you please try to create production build with eslint and eslint-plugin-react

1 Like

Actually I was mistaken - I hadn’t done eslint on a React project with react-babylonjs - oops… I just created a quick test and got this error:

[eslint] Plugin "react" was conflicted between ".eslintrc.js » plugin:react/recommended" and "BaseConfig » D:\github\create-react-app-typescript-babylonjs\node_modules\react-scripts\node_modules\eslint-config-react-app\base.js".

So, are you using Create React App or roll your own setup - I haven’t looked into how they have their own - you don’t have this conflict?

Here is my branch that adds eslint:
brianzinn/create-react-app-typescript-babylonjs at eslint (github.com)

Hi Brian,
Apology for delay in replying… But i am able to reproduce the Error. I don’t have permission to check-in the code for this repo.

Just replace package.json with below packages and do npm install again. Post that Just try to do npm run build

@typescript-eslint/eslint-plugin”: “^5.40.0”,
“autoprefixer”: “^10.4.5”,
“eslint”: “^8.25.0”,
“eslint-config-prettier”: “^8.3.0”,
“eslint-plugin-prettier”: “^4.0.0”,
“eslint-plugin-react”: “^7.31.10”,

1 Like

@brianzinn - did u get time to look into this ?

2 Likes

not yet - thanks for follow up. i’ll review after work today. thx.

Thanks !!

sorry - i’ve been really swamped lately at work. hope can check tonight… :smiling_face:

Hey, I could try helping you with this if you would create minimal repo with this issue as I don’t have time for trying to reproduce the bug