Module not found: Can't resolve 'react'

[sinnrrr]

event - build page: /
wait  - compiling...
error - ../node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:2:0
Module not found: Can't resolve 'react'

Import trace for requested module:
./components/Earth.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found

./pages/index.tsx

import dynamic from 'next/dynamic'
import type { NextPage } from 'next';

const Earth = dynamic(() => import('../components/Earth'));

const Home: NextPage = () => {
  return <Earth />;
};

export default Home;

./components/Earth.tsx

import { useLoader } from '@react-three/fiber'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'

export default function Earth() {
  const fbx = useLoader(FBXLoader, '/Poimandres.fbx')
  
  return <primitive object={fbx} />
}

Deleting node_modules and installing again (or upgrading dependencies) does not resolve the issue.
The model do exist under ./public/earth.fbx.

Reproduction repo: https://github.com/sinnrrr/backpack

[drcmda]

if you use the latest jsx transform importing react is not needed. with the old you need to import react when you use jsx:

import React from 'react'

if it isn't that something else in the build system must be wrong.

[sinnrrr]

the problem is not in the build system
the stack trace shows, that the react three fiber cannot import react library

I'm using latest Next.js install (React 17) and also tried this, but that didn't work either

[sinnrrr]

here's full logs:

event - build page: /
wait  - compiling...
error - ../node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:2:0
Module not found: Can't resolve 'react'

Import trace for requested module:
./components/Earth.tsx
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
Error: Cannot find module 'react'
Require stack:
- /home/sinnrrr/Work/new/node_modules/@react-three/fiber/dist/react-three-fiber.cjs.dev.js
- /home/sinnrrr/Work/new/node_modules/@react-three/fiber/dist/react-three-fiber.cjs.js
- /home/sinnrrr/Work/new/backpack/.next/server/pages/index.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/require.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/load-components.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/api-utils.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/next-server.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/next.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/lib/start-server.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/cli/next-dev.js
- /home/sinnrrr/Work/new/backpack/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.mod._resolveFilename (/home/sinnrrr/Work/new/backpack/node_modules/next/dist/build/webpack/require-hook.js:96:28)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)
    at Object.<anonymous> (/home/sinnrrr/Work/new/node_modules/@react-three/fiber/dist/react-three-fiber.cjs.dev.js:6:13)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/sinnrrr/Work/new/node_modules/@react-three/fiber/dist/react-three-fiber.cjs.dev.js',
    '/home/sinnrrr/Work/new/node_modules/@react-three/fiber/dist/react-three-fiber.cjs.js',
    '/home/sinnrrr/Work/new/backpack/.next/server/pages/index.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/require.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/load-components.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/api-utils.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/next-server.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/next.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/server/lib/start-server.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/cli/next-dev.js',
    '/home/sinnrrr/Work/new/backpack/node_modules/next/dist/bin/next'
  ]
}

as you can see, the problem is not on my side

[drcmda]

react is not a dependency but a peer dependency https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/package.json#L54-L58. your build project is responsible for delivering it. you can also inspect the dist esm file: https://unpkg.com/browse/@react-three/fiber@7.0.6/dist/react-three-fiber.esm.js the client-side project needs to know what to do with this line import * as React from 'react' and if it can't resolve react that points to an error in the build system.

there are lots of prod environments out there using it, many of them on next. on poimandres we host several next/three demos as well, for instance racing-game.

maybe @joshuaellis or @RenaudRohlinger know what it could be.

edit: i've found this vercel/next.js#3585 could you please check if that's your issue?