Compatibility issue: Next.js 15 and React Three Fiber - TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')

[kjwrld]

Link to the code that reproduces this issue

https://github.com/frommybrain/r3f-starter

To Reproduce

To Reproduce:

1. Create a new Next.js 15 project using create-next-app
2. Install React Three Fiber and its dependencies
3. Create a simple React Three Fiber component
4. Import and use the component in a Next.js page
5. Run the application in development mode (next dev)
6. Open the page in a browser
7. Observe the error in the browser console

Current vs. Expected behavior

Current behavior: When trying to render a React Three Fiber component in a Next.js 15 application, the following error occurs:

Unhandled Runtime Error

TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')

Call Stack:
$$$reconciler
node_modules/react-reconciler/cjs/react-reconciler.development.js (498:1)
createRenderer
node_modules/@react-three/fiber/dist/index-99983b2d.esm.js (223:32)
eval
node_modules/@react-three/fiber/dist/index-99983b2d.esm.js (1728:3)
./node_modules/@react-three/fiber/dist/index-99983b2d.esm.js
file:///Users/kj/dev/experiments/r3f-starter-main/r3f-starter-app/.next/static/chunks/app/layout.js (83:1)
Next.js
eval
./node_modules/@react-three/drei/core/Environment.js
./node_modules/@react-three/drei/core/Environment.js
file:///Users/kj/dev/experiments/r3f-starter-main/r3f-starter-app/.next/static/chunks/app/layout.js (28:1)
Next.js
eval
./src/components/three/mainCanvas.jsx

Expected behavior: The React Three Fiber component should render without errors, as it does in previous versions of Next.js.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app, Developer Experience

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

This issue appears to be specific to Next.js 15 and its interaction with React Three Fiber. The error suggests a problem with React's internal workings, possibly due to changes in Next.js 15's handling of React or its bundling process. The issue occurs in the development environment and prevents the application from rendering properly.

It would be helpful to investigate any changes in Next.js 15 that might affect how it interacts with React's internals or how it bundles React-based libraries like React Three Fiber.

TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')

[SukkaW]

Next.js 15 is using React 19. React 19 changes its secret internal API from SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED to __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.

React Three Fiber uses those React secret internals to access ReactCurrentOwner and thus is no longer compatible with React 19 (this should be expected since you are already using something that would result in YOU_WILL_BE_FIRED).

This is not the issue of React or Next.js, it is a bug of React Three Fiber. Please submit an issue there instead.

[AchrefHASNI]

@kjwrld better downgrade to [email protected]

[SukkaW]

See also: pmndrs/react-three-fiber#3222

[wodka]

I also having the issue using react 18 - so this seems to be not strictly related to a newer react version (I also tried 18.2, 18.3 and 19) - all with the same error happening once nextjs 15 is installed

[SukkaW]

I also having the issue using react 18 - so this seems to be not strictly related to a newer react version (I also tried 18.2, 18.3 and 19) - all with the same error happening once nextjs 15 is installed

Because Next.js will prefer its built-in version of React rather than your installed version.

[karlhorky]

@kjwrld have you tried @react-three/[email protected]?

It seems that some users are having success with that and Next.js 15:

• RFC: v9 goals pmndrs/react-three-fiber#2338 (comment)
• TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner') when rendering model using react-three libraries #66468 (comment)

[jinpill]

I downgraded the React version to 18, and the issue was resolved.

npm install react@18
npm install react-dom@18

[KerlosSoNy]

i have solved it by downgrade my next.js to 14.2

and remove turbopack from the package.json and insure that next.config.ts to be next.config.js