TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner') when rendering model using react-three libraries

[faraasat]

Link to the code that reproduces this issue

https://github.com/faraasat/next-issue-cannot-read-reactcurrentowner

To Reproduce

1. Install three, @react-three/fiber, @react-three/drei & @react-three/offscreen.
2. Render any model using this.
3. Start the Server

Current vs. Expected behavior

Model should be rendered correctly but got the following error:

TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
at $$$reconciler (react-reconciler.development.js:80:96)
at createRenderer (index-ba8afaa4.esm.js:221:31)
at index-ba8afaa4.esm.js:1722:5
at [project]/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@react-three/fiber/dist/index-ba8afaa4.esm.js [app-client] (:3001/ecmascript) (http://localhost:3001/_next/static/chunks/24fe2_%40react-three_fiber_dist_c7e87a._.js:2135:3)
at runtime-base.ts:348:21
at runModuleExecutionHooks (runtime-base.ts:404:5)
at instantiateModule (runtime-base.ts:346:5)
at getOrInstantiateModuleFromParent (runtime-base.ts:444:10)
at esmImport (runtime-utils.ts:228:18)
at 24fe2_@react-three_fiber_dist_c7e87a..js:2142:393
at [project]/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]/node_modules/@react-three/fiber/dist/index-ba8afaa4.esm.js [app-client] (:3001/ecmascript) (http://localhost:3001/_next/static/chunks/24fe2_%40react-three_fiber_dist_c7e87a._.js:2145:3)
at runtime-base.ts:348:21
at runModuleExecutionHooks (runtime-base.ts:404:5)
at instantiateModule (runtime-base.ts:346:5)
at getOrInstantiateModuleFromParent (runtime-base.ts:444:10)
at esmImport (runtime-utils.ts:228:18)
at node_modules__pnpm_425bbc..js:1169:430
at [project]/node_modules/.pnpm/@react-three+offscreen@0.0.8_@react-three+fiber@[email protected]_eqaez262h3qeb75o2rit6uq5sm/node_modules/@react-three/offscreen/dist/index.mjs [app-client] (:3001/ecmascript) (http://localhost:3001/_next/static/chunks/node_modules__pnpm_425bbc._.js:1560:3)
at runtime-base.ts:348:21
at runModuleExecutionHooks (runtime-base.ts:404:5)
at instantiateModule (runtime-base.ts:346:5)
at getOrInstantiateModuleFromParent (runtime-base.ts:444:10)
at esmImport (runtime-utils.ts:228:18)
at src_8ea6ba..js:333:375
at [project]/src/components/modules/home/journey/model-render/journey.offscreen.tsx [app-client] (:3001/ecmascript) (http://localhost:3001/_next/static/chunks/src_8ea6ba._.js:415:3)
at runtime-base.ts:348:21
at runModuleExecutionHooks (runtime-base.ts:404:5)
at instantiateModule (runtime-base.ts:346:5)
at getOrInstantiateModuleFromParent (runtime-base.ts:444:10)
at esmImport (runtime-utils.ts:228:18)
at src_components_9d9cfd..js:16:16

The above error occurred in the component:

at Lazy
at BailoutToCSR (http://localhost:3001/_next/static/chunks/6fdba_next_941e8c._.js:2915:11)
at Suspense
at LoadableComponent
at Journey3DModel (http://localhost:3001/_next/static/chunks/src_6d99ae._.js:1469:416)
at div
at div
at HomeJourneyLeft (Server)
at HomeJourneyContent (Server)
at HomeJourneyContent (Server)
at div
at div
at section
at JourneySection (Server)
at JourneySection (Server)
at div
at Home (Server)
at InnerLayoutRouter (http://localhost:3001/_next/static/chunks/6fdba_next_b81a0c._.js:3617:11)
at RedirectErrorBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5047:9)
at RedirectBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5055:11)
at NotFoundErrorBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5292:9)
at NotFoundBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5300:11)
at LoadingBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_b81a0c._.js:3723:11)
at ErrorBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:4759:11)
at InnerScrollAndFocusHandler (http://localhost:3001/_next/static/chunks/6fdba_next_b81a0c._.js:3528:9)
at ScrollAndFocusHandler (http://localhost:3001/_next/static/chunks/6fdba_next_b81a0c._.js:3603:11)
at RenderFromTemplateContext (http://localhost:3001/_next/static/chunks/6fdba_next_b81a0c._.js:3849:44)
at OuterLayoutRouter (http://localhost:3001/_next/static/chunks/6fdba_next_b81a0c._.js:3743:11)
at main
at Layout (Server)
at LazyMotion (http://localhost:3001/_next/static/chunks/94140_framer-motion_dist_es_2cc17b._.js:8114:27)
at LazyMotionReExport (http://localhost:3001/_next/static/chunks/src_39f5c3._.js:487:416)
at O (http://localhost:3001/_next/static/chunks/node_modules__pnpm_4b5ba7._.js:28:24)
at z (http://localhost:3001/_next/static/chunks/node_modules__pnpm_4b5ba7._.js:23:391)
at ThemeProvider (http://localhost:3001/_next/static/chunks/src_39f5c3._.js:426:416)
at GlobalLoadingProvider (http://localhost:3001/_next/static/chunks/src_39f5c3._.js:323:416)
at body
at html
at RootLayout (Server)
at RedirectErrorBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5047:9)
at RedirectBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5055:11)
at NotFoundErrorBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5292:9)
at NotFoundBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5300:11)
at DevRootNotFoundBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:5360:11)
at ReactDevOverlay (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:12141:9)
at HotReload (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:12920:11)
at Router (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:13237:11)
at ErrorBoundaryHandler (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:4713:9)
at ErrorBoundary (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:4759:11)
at AppRouter (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:13618:13)
at ServerRoot (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:13877:27)
at Root (http://localhost:3001/_next/static/chunks/6fdba_next_dist_client_daacf4._.js:13881:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ReactDevOverlay.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
  Available memory (MB): 16290
  Available CPU cores: 4
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.6 // Latest available version is detected (15.0.0-canary.6).
  eslint-config-next: 15.0.0-rc.0
  react: 19.0.0-rc-f994737d14-20240522
  react-dom: 19.0.0-rc-f994737d14-20240522
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local)

Additional context

pakage.json

{
  "name": "portfolio-v3",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "turbo": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-slot": "^1.0.2",
    "@react-three/drei": "^9.105.6",
    "@react-three/fiber": "^8.16.6",
    "@react-three/offscreen": "^0.0.8",
    "@serwist/next": "^9.0.2",
    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517",
    "framer-motion": "^11.2.6",
    "lucide-react": "^0.379.0",
    "next": "15.0.0-canary.6",
    "next-themes": "^0.3.0",
    "react": "19.0.0-rc-f994737d14-20240522",
    "react-dom": "19.0.0-rc-f994737d14-20240522",
    "react-icons": "^5.2.1",
    "react-parallax-tilt": "^1.7.226",
    "react-simple-typewriter": "^5.0.1",
    "three": "^0.164.1",
    "three-globe": "^2.31.0"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.5",
    "@testing-library/react": "^15.0.7",
    "@types/jest": "^29.5.12",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/three": "^0.164.1",
    "autoprefixer": "^10.4.19",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cssnano": "^7.0.1",
    "eslint": "^8",
    "eslint-config-next": "15.0.0-rc.0",
    "eslint-plugin-jest-dom": "^5.4.0",
    "eslint-plugin-testing-library": "^6.2.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8",
    "serwist": "^9.0.2",
    "tailwind-merge": "^2.3.0",
    "tailwindcss": "^3.4.1",
    "tailwindcss-animate": "^1.0.7",
    "ts-jest": "^29.1.3",
    "ts-node": "^10.9.2",
    "typescript": "^5"
  }
}

next.config.mjs

// @ts-check
import withSerwistInit from "@serwist/next";

const withSerwist = withSerwistInit({
  cacheOnNavigation: true,
  swSrc: "src/sw.ts",
  swDest: "public/sw.js",
  reloadOnOnline: true,
  disable: process.env.NODE_ENV === "development",
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    reactCompiler: true,
    ppr: "incremental",
    after: true,
  },
  // Automatically bundle external packages in the Pages Router:
  bundlePagesRouterDependencies: true,
  // Opt specific packages out of bundling for both App and Pages Router:
  // serverExternalPackages: ["package-name"],
};

export default withSerwist(nextConfig);

[tseijp]

I encountered a similar issue while testing the rc version of ▲Next.js with 🇨🇭r3f using the command npx create-next-app@rc && npm i three @types/three @react-three/fiber. Here's the error message:

⨯ node_modules/@react-three/fiber/node_modules/react-reconciler/cjs/react-reconciler.development.js (498:1) @ $$$reconciler
⨯ TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')
  at __webpack_require__ ($/.next/server/webpack-runtime.js:33:42)
  at __webpack_require__ ($/.next/server/webpack-runtime.js:33:42)
  at eval (./app/_three/Experience.tsx:7:76)
  at (ssr)/./app/_three/Experience.tsx ($/.next/server/app/page.js:118:1)
  at Object.__webpack_require__ [as require] ($/.next/server/webpack-runtime.js:33:42)
digest: "2001453440"
496 | var StaticMask = LayoutStatic | PassiveStatic | RefStatic;
497 |
> 498 | var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
    | ^
499 | function getNearestMountedFiber(fiber) {
500 |   var node = fiber;
501 |   var nearestMounted = fiber;

[odysseaspapadimas]

Using pnpm i @react-three/fiber@alpha fixed my issue
pmndrs/react-three-fiber#3274 (comment)

[eps1lon]

Closing since the latest version of @react-three/fiber has no support for React 19. You need to use @react-three/fiber@alpha when you're using Next.js 15 Canaries or Release Candidates.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.