Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
threepointone opened this issue Jul 12, 2024 · 3 comments
Open

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

threepointone opened this issue Jul 12, 2024 · 3 comments
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Middleware Related to Next.js Middleware. Output (export/standalone) Related to the the output option in `next.config.js`.

Comments

@threepointone
Copy link
Contributor

Link to the code that reproduces this issue

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

To Reproduce

  • npx next build
  • bun lcs.ts

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
@threepointone threepointone added the bug Issue was opened via the bug report template. label Jul 12, 2024
@github-actions github-actions bot added Middleware Related to Next.js Middleware. Output (export/standalone) Related to the the output option in `next.config.js`. labels Jul 12, 2024
@james-elicx james-elicx mentioned this issue Jul 12, 2024
Closed
1 task
@mhart
Copy link

mhart commented Jul 13, 2024

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
Copy link

bjarn commented Jul 31, 2024

Regarding cloudflare/next-on-pages#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
Copy link

adrianomolin commented Aug 1, 2024 •
edited
Loading

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

@github-actions github-actions bot added the linear: next Confirmed issue that is tracked by the Next.js team. label Sep 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. linear: next Confirmed issue that is tracked by the Next.js team. Middleware Related to Next.js Middleware. Output (export/standalone) Related to the the output option in `next.config.js`.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@threepointone @mhart @bjarn @adrianomolin