vercel / next.js

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

v14.1 react-refresh-runtime errors #61054

Closed jaydubb12 closed 8 months ago

jaydubb12 commented 9 months ago

Link to the code that reproduces this issue

https://github.com/jaydubb12/next14

To Reproduce

  1. Navigate to app directory cd test-app
  2. Start the dev server yarn dev
  3. View browser console and you will observe a webpack error associated with react-refresh-runtime that states exports is not defined
    at eval (react-refresh-runtime.development.js:530:9)
    at eval (react-refresh-runtime.development.js:542:7)
    at (:3000/node_modules/next/dist/compiled/react-refresh/cjs/react-refresh-runtime.development.js (http://localhost:3000/_next/static/chunks/main-app.js?v=1706052645707:127:1)
    at options.factory (webpack.js?v=1706052645707:710:31)
    at __webpack_require__ (webpack.js?v=1706052645707:37:33)
    at fn (webpack.js?v=1706052645707:365:21)
    at eval (runtime.js:3:22)
    at (:3000/node_modules/next/dist/compiled/react-refresh/runtime.js (http://localhost:3000/_next/static/chunks/main-app.js?v=1706052645707:138:1)
    at options.factory (webpack.js?v=1706052645707:710:31)
    at __webpack_require__ (webpack.js?v=1706052645707:37:33)

Current vs. Expected behavior

Current Behavior

Next v14.1 is causing unexpected build & dependency errors due to breaking changes

Expected Behavior

v14.1 would result in a no harm release that would not impact current / new projects

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.2.0: Wed Nov 15 21:53:34 PST 2023; root:xnu-10002.61.3~2/RELEASE_ARM64_T8103
Binaries:
  Node: 20.4.0
  npm: 9.7.2
  Yarn: 4.0.2
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

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

Module resolution (CJS / ESM, module resolving)

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

next dev (local), next build (local)

Additional context

I have tested against the canary version and the behavior is the same

cbratschi commented 8 months ago

I got this problem after upgrading to 14.1.1, this did not happen with the previous release:

runtime.js:13 Uncaught TypeError: Cannot read properties of undefined (reading 'injectIntoGlobalHook')
at eval (runtime.js:13:19)
    at (:3000/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js (http://localhost:3000/_next/static/chunks/main-app.js?v=1709570710124:50:1)
    at options.factory (webpack.js?v=1709570710124:716:31)
    at __webpack_require__ (webpack.js?v=1709570710124:37:33)
    at __webpack_exec__ (main-app.js?v=1709570710124:2256:61)
    at main-app.js?v=1709570710124:2257:37
    at webpackJsonpCallback (webpack.js?v=1709570710124:1388:39)
    at main-app.js?v=1709570710124:9:61

This line is failing:

var runtime_1 = __importDefault(__webpack_require__(/*! next/dist/compiled/react-refresh/runtime */
"(app-pages-browser)/../../node_modules/next/dist/compiled/react-refresh/runtime.js"));
var helpers_1 = __importDefault(__webpack_require__(/*! ./internal/helpers */
"(app-pages-browser)/../../node_modules/next/dist/compiled/@next/react-refresh-utils/dist/internal/helpers.js"));
// Hook into ReactDOM initialization
runtime_1.default.injectIntoGlobalHook(self);

Deleted all caches (.next und node_modules/.cache) and tried to disable turbo but always keeps failing.

cbratschi commented 8 months ago

Well, downgraded to 14.1.0 and added the browserlist workaround again. Now it was running. Then upgraded to 14.1.1 and with the browserlist workaround it was still working.

So the workaround is adding this line to package.json:

"browserslist": [
        "Chrome 118"
]

This was supposed to be fixed in 14.1.1: https://github.com/vercel/next.js/issues/60890

@huozhi please check this issue again.

huozhi commented 8 months ago

The reproduction works for me even with 14.1.0. image

We had some fixes for react-refresh runtime erros in 14.1.1, would like to see a different reproduction that can hit the error if it still bothers you 🙏

cbratschi commented 8 months ago

My case seems to be different. Last time I could not reproduce it in a test case. I guess this one is difficult to reproduce too.

github-actions[bot] commented 7 months 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.