react-three-fiber icon indicating copy to clipboard operation
react-three-fiber copied to clipboard
verified publisher icon pmndrs

react 19 (v9) createPortal bug

Open bbohlender opened this issue 9 months ago • 3 comments

Hey :)

An issue was reported to me that I identified to be a bug in react-three/fiber. I've created an reproduction repo here: https://github.com/bbohlender/r3f-portal-bug

Steps to reproduce

  1. npm install & npm run dev
  2. notice that no mesh is bound to the camera (hotpink cube)
  3. change react, react-dom, react-three/fiber and react-three/drei to the according react 18 deps
  4. run npm install again, clear the vite deps, and run npm run dev again
  5. notice that the mesh is now visible and bound to the camera (hotpink cube)

The issue seems to be that when the container of createPortal changes, the children are still bound to the previous container, which only happens after the upgrade to react 19 (including the react-three/fiber and drei deps).

Let me know if I can help with anything :)

bbohlender avatar Mar 06 '25 23:03 bbohlender

This may be fixed by: https://github.com/pmndrs/react-three-fiber/pull/3488

krispya avatar Mar 07 '25 23:03 krispya

The PR fixed another related bug, but this issue still persists.

wrangelvid avatar Mar 08 '25 09:03 wrangelvid

It looks like my fix didn't resolve the issue, just the simple test I set up. I'll investigate more this weekend.

krispya avatar Mar 08 '25 16:03 krispya