Not working on nextjs projects
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
What are your errors? What versions exactly are you using? Can you give us an example codebase?
hi,i temporarily resolved that by installing @react-three/fiber@alpha. as of now it is not quite compatible with the latest nextjs version
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.
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.
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)
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.,
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.