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

kjwrld · 2024-10-24T23:09:32Z

Link to the code that reproduces this issue

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

To Reproduce

To Reproduce:

Create a new Next.js 15 project using create-next-app
Install React Three Fiber and its dependencies
Create a simple React Three Fiber component
Import and use the component in a Next.js page
Run the application in development mode (next dev)
Open the page in a browser
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')

The text was updated successfully, but these errors were encountered:

SukkaW · 2024-10-25T03:23:54Z

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 · 2024-10-25T18:41:04Z

@kjwrld better downgrade to [email protected]

SukkaW · 2024-10-26T10:19:28Z

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

wodka · 2024-10-28T23:14:42Z

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 · 2024-10-29T01:02:53Z

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 · 2024-10-29T11:34:34Z

@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)

Need to use the 9 beta. Potential related issue: vercel/next.js#71836

KerlosSoNy · 2024-11-23T11:00:48Z

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

renoiser · 2024-11-26T09:57:55Z

It works for me using "@react-three/fiber": "9.0.0-rc.1"

"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106"
"react-dom": "19.0.0-rc-66855b96-20241106"

IdrisKulubi · 2024-12-02T06:40:06Z

Just use this npm i @react-three/fiber@alpha will solve the bug without downgrading your NextJs .

eik-1 · 2024-12-06T11:40:01Z

It works for me using "@react-three/fiber": "9.0.0-rc.1"
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106"
"react-dom": "19.0.0-rc-66855b96-20241106"

Thanks this worked for me aswell

@kjwrld

nextのダウングレードエラー： TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner') 参考： vercel/next.js#71836 → @kjwrld better downgrade to [email protected]

edinsoncs · 2024-12-23T21:14:22Z

Simplemente use este npm i @react-three/fiber@alpha y resolverá el error sin degradar su NextJs.

It worked

Ousbaiy · 2025-01-02T16:19:53Z

i got this error when building: Type error: Module '"@react-three/fiber"' has no exported member 'Object3DNode.
using this version "@react-three/fiber": "^9.0.0-alpha.8",

ussef083 · 2025-01-02T17:23:03Z

It works for me using "@react-three/fiber": "9.0.0-rc.1"
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106"
"react-dom": "19.0.0-rc-66855b96-20241106"

This version 9.0.0-rc.1 works for me , i use Nextjs 15

jackvijayy · 2025-01-03T06:20:20Z

@kjwrld better downgrade to [email protected]

works for me downgrade next

jackvijayy · 2025-01-03T06:22:45Z

[email protected]

1.npm uninstall next

2.npm install [email protected]

3.npm list next //check the version

4.update package.json:

"dependencies": {
"next": "14.2.16",
}

5.npm install

6.npm run dev

enjoy your models😁😁👋

adityamandal-Developer · 2025-01-03T10:15:41Z

whats the fix of this as of jan 3 2025? am getting the same error
TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')

IdrisKulubi · 2025-01-03T11:26:10Z

Just use this npm i @react-three/fiber@alpha will solve the bug without downgrading your NextJs .

adityamandal-Developer · 2025-01-03T17:49:53Z

yeah thank you it worked

IdrisKulubi · 2025-01-03T19:26:16Z

yeah thank you it worked

You're welcome👍

SheIsBukki · 2025-01-04T20:38:25Z

I had the same error today. After reading responses, I fixed it by upgrading to

@react-three/fiber@alpha and then npm install --legacy-peer-deps fixed compatibility issues

johnidogun · 2025-01-08T19:34:54Z

Use npm install "@react-three/fiber@alpha

as at the time I posted this message the version was "@react-three/fiber": "^9.0.0-alpha.8",

GylanSalih · 2025-01-15T23:27:26Z

[email protected]

1.npm uninstall next

2.npm install [email protected]

3.npm list next //check the version

4.update package.json:

"dependencies": { "next": "14.2.16", }

5.npm install

6.npm run dev

enjoy your models😁😁👋

Thank you so much! worked fine!

kjwrld added the bug Issue was opened via the bug report template. label Oct 24, 2024

github-actions bot added create-next-app Related to our CLI tool for quickly starting a new Next.js application. Developer Experience Issues related to Next.js logs, Error overlay, etc. Turbopack Related to Turbopack with Next.js. labels Oct 24, 2024

jgal1 mentioned this issue Oct 28, 2024

property does not exist on JSX.IntrinsicElements - ts(2339) pmndrs/react-three-fiber#3385

Closed

github-actions bot added the linear: turbopack Confirmed issue that is tracked by the Turbopack team. label Oct 28, 2024

timneutkens removed the Turbopack Related to Turbopack with Next.js. label Oct 29, 2024

thejustinwalsh mentioned this issue Oct 30, 2024

Bug: Next.js 15 & React 19 incompatibility pixijs/pixi-react#551

Closed

This comment was marked as off-topic.

Sign in to view

github-actions bot added the linear: next Confirmed issue that is tracked by the Next.js team. label Nov 4, 2024

Pixelrobin added a commit to Pixelrobin/athena-crisis that referenced this issue Nov 7, 2024

Add react-three-fiber and threejs

ace7dc6

Need to use the 9 beta. Potential related issue: vercel/next.js#71836

ztanner added the Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). label Nov 7, 2024

samcx removed the linear: turbopack Confirmed issue that is tracked by the Turbopack team. label Nov 7, 2024

This comment was marked as off-topic.

Sign in to view

aquibbaig mentioned this issue Dec 4, 2024

[WIP] migrate nextjs from 14 -> 15 typehero/typehero#1654

Draft

YuugouOhno mentioned this issue Dec 24, 2024

threejsの導入 YuugouOhno/portfolio-ver3#2

Merged

chris-kck mentioned this issue Jan 4, 2025

REACT 19 slash9494/react-modern-audio-player#27

Open

incolore9 mentioned this issue Jan 13, 2025

[map] react-three-fiber 로 변환중 오류 나는 코드 ormcamp-fe-3rd/FlightLog#24

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kjwrld commented Oct 24, 2024 •

edited by timneutkens

Loading

SukkaW commented Oct 25, 2024 •

edited

Loading

AchrefHASNI commented Oct 25, 2024

SukkaW commented Oct 26, 2024

wodka commented Oct 28, 2024

SukkaW commented Oct 29, 2024

karlhorky commented Oct 29, 2024 •

edited

Loading

This comment was marked as off-topic.

KerlosSoNy commented Nov 23, 2024 •

edited

Loading

This comment was marked as off-topic.

renoiser commented Nov 26, 2024 •

edited

Loading

IdrisKulubi commented Dec 2, 2024

eik-1 commented Dec 6, 2024

edinsoncs commented Dec 23, 2024

Ousbaiy commented Jan 2, 2025

ussef083 commented Jan 2, 2025 •

edited

Loading

jackvijayy commented Jan 3, 2025

jackvijayy commented Jan 3, 2025

adityamandal-Developer commented Jan 3, 2025

IdrisKulubi commented Jan 3, 2025

adityamandal-Developer commented Jan 3, 2025

IdrisKulubi commented Jan 3, 2025

SheIsBukki commented Jan 4, 2025

johnidogun commented Jan 8, 2025

GylanSalih commented Jan 15, 2025

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

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

Comments

kjwrld commented Oct 24, 2024 • edited by timneutkens Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

SukkaW commented Oct 25, 2024 • edited Loading

AchrefHASNI commented Oct 25, 2024

SukkaW commented Oct 26, 2024

wodka commented Oct 28, 2024

SukkaW commented Oct 29, 2024

karlhorky commented Oct 29, 2024 • edited Loading

This comment was marked as off-topic.

KerlosSoNy commented Nov 23, 2024 • edited Loading

This comment was marked as off-topic.

renoiser commented Nov 26, 2024 • edited Loading

IdrisKulubi commented Dec 2, 2024

eik-1 commented Dec 6, 2024

edinsoncs commented Dec 23, 2024

Ousbaiy commented Jan 2, 2025

ussef083 commented Jan 2, 2025 • edited Loading

jackvijayy commented Jan 3, 2025

jackvijayy commented Jan 3, 2025

adityamandal-Developer commented Jan 3, 2025

IdrisKulubi commented Jan 3, 2025

adityamandal-Developer commented Jan 3, 2025

IdrisKulubi commented Jan 3, 2025

SheIsBukki commented Jan 4, 2025

johnidogun commented Jan 8, 2025

GylanSalih commented Jan 15, 2025

kjwrld commented Oct 24, 2024 •

edited by timneutkens

Loading

SukkaW commented Oct 25, 2024 •

edited

Loading

karlhorky commented Oct 29, 2024 •

edited

Loading

KerlosSoNy commented Nov 23, 2024 •

edited

Loading

renoiser commented Nov 26, 2024 •

edited

Loading

ussef083 commented Jan 2, 2025 •

edited

Loading