search

vercel / next.js

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

2 copies of react get embedded inside generated edge-chunks #67694

Open threepointone opened 2 months ago

threepointone commented 2 months ago

Link to the code that reproduces this issue

https://github.com/threepointone/next-repro-react-dupe

To Reproduce

Current vs. Expected behavior

We're tracking down an issue where useContext isn't available on React, and discovered that webpack's chunks generated for the edge stuff seems to have multiple versions of react embedded into it. Here's a repro https://github.com/threepointone/next-repro-react-dupe

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:14:38 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.14.0
  npm: 10.7.0
  Yarn: 4.2.2
  pnpm: 9.1.3
Relevant Packages:
  next: 14.2.4 // There is a newer version (14.2.5) available, upgrade recommended! 
  eslint-config-next: 14.1.0
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

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

Middleware, Output (export/standalone)

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

next build (local)

Additional context

No response

mhart commented 2 months ago

For more details, it looks like these are both duplicated:

react-jsx-runtime.production.min.js
react.production.min.js

Easy to see if you run an unminified build

bjarn commented 1 month ago

Regarding https://github.com/cloudflare/next-on-pages/issues/805, I have an app in production and one in development that has this bug too.

During development, these are the logs:

 ⨯ TypeError: Cannot read properties of null (reading 'useContext')
    at usePathname (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:3834:238)
    at ErrorBoundary (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:4144:227)
digest: "2171786467"
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
    at t.useContext (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:162241)
    at usePathname (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:3834:238)
    at ErrorBoundary (/PROJECTPATH/.next/server/chunks/ssr/node_modules_next_dist_esm_1c713e._.js:4144:227)
    at au (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:10446)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:15122
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:46505)
    at a_ (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at ab (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:11808)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16871
    at aw (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:16908)
    at a_ (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:49776)
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:58612
    at /PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59270
    at aN (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:59278)
    at Timeout._onTimeout (/PROJECTPATH/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:6939)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)

I have Turbopack enabled and the error goes away after restarting. Sadly not sure how to actually trigger it in development. I haven't found a reproduction step, it just "happens" after some time.

If any information is needed, just mention me!

adrianomolin commented 1 month ago

@bjarn I'm facing this while previewing deployments with cloudflare/next-on-pages (using cf-preview), and managed to reproduce it easily by using browser's back and forward on routes wrapped by a ContextProvider.

Maybe that can help you reproducing in dev.