search

brianzinn / react-babylonjs

React for Babylon 3D engine
https://brianzinn.github.io/react-babylonjs/
812 stars 102 forks source link

warning "react-babylonjs > react-reconciler@0.26.2" has incorrect peer dependency "react@^17.0.2" #221

Closed nyngwang closed 2 years ago

nyngwang commented 2 years ago

As title. I'm using React 18. While it can still be compiled/bundled by Webpack without problems.

brianzinn commented 2 years ago

Thanks again - you are right. I should up it to 0.27.0. I'll work on a new package this weekend, but it will only be for babylon 5.x versions going forward for now based on what you reported in the other issue... I can make it a peer dep I suppose... I'll look into that as an option.

dennemark commented 2 years ago

Maybe I can add this issue here, too, since it is related to use of React 18. https://github.com/pmndrs/react-three-fiber/issues/2218 I am experiencing the same issue in react-babylons as others in the react-three-fiber. It seems the useRef interface changed slighlty in react 18. There is also a PR. I guess it can be similarly implemented in react-babylonjs.

dennemark commented 2 years ago

The issue should be fixed by commit https://github.com/brianzinn/react-babylonjs/commit/c1fedc7123e6ec690d805cfa3b8caf946b81ad4a

However, it seems the generated props of babylon node still contains ref?: Ref<ReactNode> instead of ref?: Ref<T>

https://github.com/brianzinn/react-babylonjs/blob/318502acf7d213f6effc2da948f009f27d2a574f/packages/react-babylonjs/src/generatedProps.ts#L393

Was the code for version 3.1.3. properly generated?

I think, if we fix the generated props, we can close this issue.

brianzinn commented 2 years ago

Was the code for version 3.1.3. properly generated? No, it wasn't thanks for reporting @dennemark . Can you confirm it's fixed now?

dennemark commented 2 years ago

@brianzinn thanks for the fast update! Unfortunately the above mentioned line in generatedProps still useses Ref. I tried to run generate-code and the build script in the repository, but could not do both. The generate-code script would not recognize a .ts file even though the tsconfig includes "module": "commonjs". So I had to dig a bit deeper and change a bit of configuration.

Futhermore running the build task would not work, since react-babylonjs uses react 17 and that led to some type issues as far as I could see. But the issue was also connected to the wrong ReactNode type in GeneratedProps.

Now it seems to work for me. I am going to create a PR. It contains the updated generated-code script and updates to react 18 in react-babylonjs package. Also for the Html component. Not sure though, if the way the Engine is mounted, is still correct though. Probably needs bit of testing.

dennemark commented 2 years ago

@brianzinn do you mind pushing a new version of react-babylonjs? I could use it to test the react 18 update. maybe using a different tag is good at this point?

brianzinn commented 2 years ago

I tried - got an error in the automated build. I think from Babylon versions. Will check tomorrow to fix

brianzinn commented 2 years ago

@dennemark can you try 3.1.5? I kept same tag and even did a patch - see how it goes. I'm super swamped right now - definitely don't want new React 18 to have troubles. Thanks again for the PR and following up. Let me know if this can be closed 😄

dennemark commented 2 years ago

@brianzinn I was able to use 3.1.5. Had to upgrade babylonjs to the newest versions though and install additional packages in my case. Then building worked again without type errors!

    "@babylonjs/core": "^5.14.1",
    "@babylonjs/gui": "^5.14.1",
    "@babylonjs/gui-editor": "^5.14.1",
    "@babylonjs/inspector": "^5.14.1",
    "@babylonjs/loaders": "^5.14.1",
    "@babylonjs/materials": "^5.14.1",
    "@babylonjs/node-editor": "^5.14.1",
    "@babylonjs/serializers": "^5.14.1",
    "react-babylonjs": "^3.1.6"

Thanks a lot. I would say this issue can be closed.