react-three-fiber icon indicating copy to clipboard operation
react-three-fiber copied to clipboard

Not working on nextjs projects

Open imsarah opened this issue 10 months ago • 7 comments

latest 9.0 version doesn't work with next.js , have to revert back to v8 there are too many error this thing isn't usable

imsarah avatar Mar 09 '25 18:03 imsarah

What are your errors? What versions exactly are you using? Can you give us an example codebase?

krispya avatar Mar 13 '25 18:03 krispya

hi,i temporarily resolved that by installing @react-three/fiber@alpha. as of now it is not quite compatible with the latest nextjs version

imsarah avatar Mar 14 '25 08:03 imsarah

Other users say it is fine. I can't help narrow down where the problem is unless I get exact version numbers and a reproduction.

krispya avatar Mar 14 '25 19:03 krispya

Any Text/Text3D from Drei of latest version clearly breaks any latest version of NextJs/React19 in any scenario, errors vary VASTLY depending on are you using, so it could be that people are encountering and googling different Errors, even though its same cause.

To reproduce, init NextJs App, add drei,fiber. Canvas component and any Text. Anything else is not necessary, but will produce different errors, depending on whether you use webgpu, shaders/shadows, simple meshes, etc.

https://github.com/pmndrs/react-three-fiber/issues/3494 https://github.com/pmndrs/drei/issues/2403 are in essence, - same issue.

curiousMousey avatar Apr 07 '25 09:04 curiousMousey

I use it with nextjs version 15.3.1, react and react-dom versions 19.1.0, and am using the latest versions of three, r3f, and drei. It all works as intended. Make sure you have @types/three and three-stdlib installed, too (and typescript@^5.8.3, @types/node@^latest, etc)

DopamineDriven avatar Apr 23 '25 16:04 DopamineDriven

useLoader + loading the canvas as a dynamic component does not work. A simple scene with meshStandardMaterial works fine. As soon as you try do add a texture or something using useLoader the scene will render for a few frames but then crash with a THREE.WebGLRenderer: Context Lost. error. Using the latest stable versions of everything.,

AllenWilliamson avatar May 28 '25 00:05 AllenWilliamson

For anyone hitting WebGL context loss with components that use useLoader (or drei components that call it), wrap that subtree in a React Suspense boundary. Without Suspense, Strict Mode’s dev-only double mount can duplicate loader work and briefly double GPU allocations, which can trigger context loss.

yoshiwarab avatar Sep 10 '25 22:09 yoshiwarab