onboarding with NextJS fails with demo code

[dohomi]

I followed the docs for NextJS and tried to add this plugin into an existing NextJS v12.1.2 app. TM module is active inside of next.config.js but I still receive following error while trying to load the app:

./node_modules/@react-three/drei/web/Html.js:3:0
Module not found: Can't resolve 'react-dom/client'

Import trace for requested module:
./node_modules/@react-three/drei/index.js

while trying to start my app. Is there anything else missing?

[dohomi]

I downgraded react-three/drei from 9.x => 8.x and then it worked. But I receive now a different error:

Unhandled Runtime Error
TypeError: Cannot create property '_updatedFibers' on number '0'

Call Stack
requestUpdateLane
node_modules/react-reconciler/cjs/react-reconciler.development.js (17464:0)
Object.updateContainer
node_modules/react-reconciler/cjs/react-reconciler.development.js (20909:0)
Object.render
node_modules/@react-three/fiber/dist/index-e42f8ac9.esm.js (1744:0)
Canvas
node_modules/@react-three/fiber/dist/react-three-fiber.esm.js (174:0)

I use dynamic with ssr:false. I am not sure, is it possible to load a https resource for the .glb file from Blender? I use a CMS and upload the file to a CDN storage and would like to render it inside of a NextJS page as a component.

function Model() {
  const { scene } = useGLTF('https://urlToFile.glb') // is this possible? 
  return <primitive object={scene} />
}

[joshuaellis]

v8 of react-three-fiber and v9 of drei both require react@18.

If you want to use react@17 then you need to be used v7 and v8 of react-three-fiber and drei respectively.

[CodyJasonBennett]

To add on, you'll also need react-dom@18. Likely where the first batch of errors are coming from if you're already on react 18.

[dohomi]

Ok thanks for the info. Is it possible to reference external .glb files? Or does the file need to be placed into the public folder? I need to check if I can use react@18 with NextJS 12.1 - otherwise I'll downgrade for now

[CodyJasonBennett]

You can import them as you would a module to let webpack transform them, otherwise everything in public is always available at runtime.

import modelPath from './path/to/model.glb'

loader.load(modelPath)