reactjsnext.jsreact-three-fiberreact-three-dreinext.js14

Cannot use react-three/drei Text component in NextJs 14

I am trying to create a card component using @react-three/fiber and drei.

Whenever I call the @react-three/drei Text component in the @react-three/fiber Canvas, the app crashes. If I remove the Text, everything works normally. I have been playing around with @react-three/fiber and drei, everything else seems to work fine, except for this one Text component. I am using NextJs 14. This is the error message :

ReferenceError: window is not defined
    at 074144cd-eb2a-4817-b963-4742aace8dff:116:29
    at typrFactory (074144cd-eb2a-4817-b963-4742aace8dff:1474:6)
    at init (268939fd-29d1-476f-a4f4-53e3c5ac7be8:5:22)
    at registerModule (759893f1-d463-4a83-9b7a-befb98ba428d:40:30)
    at 759893f1-d463-4a83-9b7a-befb98ba428d:23:21
    at Array.map (<anonymous>)
    at registerModule (759893f1-d463-4a83-9b7a-befb98ba428d:21:41)
    at 759893f1-d463-4a83-9b7a-befb98ba428d:23:21
    at Array.map (<anonymous>)
    at registerModule (759893f1-d463-4a83-9b7a-befb98ba428d:21:41)

I don't call the window object anywhere. And I have "use client" at the top of my code. Here is the repo link

Solution

  • Unfortunately, <Text> and <Text3D> will not work with NextJS app router unless its 14.0.1 or less version.

    https://github.com/vercel/next.js/issues/58557#issuecomment-1818922996