Description
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')