search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.69k stars 26.62k forks source link

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

Closed faraasat closed 2 weeks ago

faraasat commented 3 months ago

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/@react-three+fiber@8.16.6_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522_three@0.164.1/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_distc7e87a..js:2142:393 at [project]/node_modules/.pnpm/@react-three+fiber@8.16.6_react-dom@19.0.0-rc-f994737d14-20240522_react@19.0.0-rc-f994737d14-20240522_three@0.164.1/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__pnpm425bbc..js:1169:430 at [project]/nodemodules/.pnpm/@react-three+offscreen@0.0.8@react-three+fiber@8.16.6_react-dom@19.0.0-rc-f994737d14-2024052_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 src8ea6ba..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_components9d9cfd..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);
amauryfischer commented 2 months ago

same problem here

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

tseijp commented 1 month ago

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 commented 1 month ago

Using pnpm i @react-three/fiber@alpha fixed my issue https://github.com/pmndrs/react-three-fiber/issues/3274#issuecomment-2135293586

eps1lon commented 2 weeks ago

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[bot] commented 4 days ago

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.