Babylon Version 8 React 18

[dennemark]

Hi @brianzinn ,
react-babylonjs still works smoothly. Pretty solid foundations most of the time I would say.
But in our app we stayed for quite a while on version 7.10. Now we upgraded to use CSG2.
I am using react-babylonjs with v 3.2.2 and babylonjs with v 7.54.3. This all works out well.
If I change to 3.2.4 or set it to ^3.2.2 which will also install 3.2.4, it will stop working because of react 19. Since I currently do not dare to move to react 19 yet, I just pinned it to 3.2.2.
However if I use babylon v8, I am getting issues with fromInstance, complaining that the Mesh class is not correct.

react-babylonjs/packages/react-babylonjs/src/ReactBabylonJSHostConfig.ts

Line 493 in 7b3613e

if (props.fromInstance instanceof clazz) {

Moving back to v7.54.3 solves the issue.
I am now wondering if it would be a hassle to still support react 18 and babylon v8.
But I also read in release notes or somewhere, that you try to support r18 and r19 anyways. So this might solve this issue.
Just wondering if you have an opinion about this.
Kind regards!

Btw. is there a way to sponsor you or send some coffee tip?

[brianzinn]

Hi @dennemark - I’m here for free - thanks!

I want to get a version that supports react 18+19. I just need to check react version and make a small change in renderer. To support Babylon 7+8 - I need to look at the error. Did you try reference AbstractMesh instead? Do you have a strongly typed ref? Can you share more code?

[dennemark]

Hi,
I am afk now. Might need to show some code then on monday.

But i just loaded a gltf asset via useAssetManager and took a mesh of loadedMeshes (setMeshes(task.loadedMeshes[0].mesh[0])) and placed in onto

So the loadedMesh was getClassName() Mesh and clazz too. But i think because of different versions it would not align. Maybe because react-babylonjs only had babylong resolution from version 5 to 7 in my package lock file.

[brianzinn]

Ok - let’s connect next week and we can get it working then. I shouldn’t have done a patch version - hope we can fix it soon. Cheers.

[brianzinn]

Can you try @latest - there is a beta build.

[dennemark]

So far so good on 3.2.5-beta.2! Thanks a lot!

[brianzinn]

thank @dennemark - i'll publish as latest. hopefully that fixes the React 19 woes as well...

[dennemark]

Hi, there might be still an issue. I do not understand why it was not there before. Maybe i did not install my packages properly, but i am getting a fromInstance error, when i use babylonjs version 8 and react-babylonjs 3.2.5-beta.2...
I think it only came up now, since I might have deleted .vite/deps folder.
Unfortunately the error message does not point me to the correct line.
fromInstance wrong type.

Here is what I could debug. TreeAsset that is throwing the error is using useAssetManager. But the props of it are stranegly undefined, even though they normal should not. So I am guessing the reconciler is not forwarding the props properly:

Here I use TreeAsset - props should be always set:

Here we can see how useAssetManager is used:

Debugging in browser shows me this:

Props are strangely undefined:

Continuing a step with the debugger will show me this error (i left out my paths thats why i made two screenshots):

Now TreeAsset is being called around three times. The first two times it has properties. But I guess because it is suspended, it does not render with props. Then however suspense finishes and does not have any properties. Not sure if that has to do with useSyncExternalStore. But I guess Suspense works bit different in react 18 vs 19?

[brianzinn]

"dispatcher is null" - are you sure you don't have a mismatch of react and react-dom? also, only one version of react in your app? are you able to create a small repro repo? i cannot reproduce here. i have gone through breaking changes in Babylon 8 and React 19 and it looks like asset manager breaking changes and suspense improvements would not have this impact.

[dennemark]

Sure i am going to have a closer look! I was using react 18.3.1. But i was also surprised of this issue appearing, since it worked on tuesday, but yesterday it suddenly did not.
Might be an issue otherwise with checking out to the wrong branch. But i think i cleaned up vite cache.
Anyways. With version 7.53.4 and 3.22 it works so far on react 18.

[brianzinn]

I just realized - if it's just a typings issue - it may be due to the global JSX Intrinsic elements. Those changed in React 19 - I think I need to dual write those...

[dennemark]

Maybe that is the case.
I just tried again after deleting my node_modules folder. Then I am getting the fromInstance error.
"@babylonjs/core": "8.9.0",
"react": "^18.3.1",
"react-babylonjs": "3.2.5-beta.2",
"react-dom": "^18.3.1",

[dennemark]

Hi,
I am currently trying to move to react 19 in my repo. Most things work fine, but there is an issue with useAssetManager still. Different though to the before mentioned issues. The asst manager loads my asset but the position data is undefined.
Is this something you have stumbled upon or can reproduce?
I can try to make a reproduction.

  const assetManagerResult = useAssetManager([
    {
      taskType: TaskType.Mesh,
      rootUrl: props.rootUrl ?? '',
      sceneFilename: props.filename,
      name: 'Tree',
    },
  ])
  const treeTask = assetManagerResult.taskNameMap['Tree'] as MeshAssetTask

  useLayoutEffect(() => {
    if (treeTask.isCompleted) {
      const rootMesh = treeTask.loadedMeshes.find((m) => m.name === '__root__')
      const meshes = treeTask.loadedMeshes as Mesh[]
      console.log(
        'tree',
        meshes.map((m) => m.getVertexBuffer(VertexBuffer.PositionKind)),
      ) // tree undefined
,[treeTask.isCompleted])

[brianzinn]

I don’t think when “isCompleted” charges it would trigger a re-render. I’m on vacation this week - can you confirm your use layout effect is triggered?