ReferenceError: $RefreshReg$ is not defined using Next.js 9.4
See original GitHub issueDescription
Using latest Next.js version which enables Fast Refresh by default compilation seems to break with the error:
ReferenceError: $RefreshReg$ is not defined
Not urgent since you can disable FastRefresh, but wanted to start investigating and get pointed in the right direction if this seems like the wrong place to seek help.
I’ve traced it down to most likely something being dropped/lost in transpilation of the glaze module and glaze code being eval’d in the treat webpack plugin (where the error is thrown).
Full trace
ReferenceError: $RefreshReg$ is not defined
at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js?!./node_modules/glaze/dist-web/useStyling.treat.js:30:1)
at Module../node_modules/next/dist/build/webpack/loaders/next-babel-loader.js?!./node_modules/glaze/dist-web/useStyling.treat.js (/Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:201:1)
at __webpack_require__ (/Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:31:31)
at /Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:104:18
at /Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:107:10
at Script.runInContext (vm.js:131:20)
at Script.runInNewContext (vm.js:137:17)
at module.exports (/Users/drk/dev/derekr/blergh.com/node_modules/eval/eval.js:73:12)
at produce (/Users/drk/dev/derekr/blergh.com/node_modules/treat/webpack-plugin/loader.js:152:14)
ReferenceError: $RefreshReg$ is not defined
at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js?!./node_modules/glaze/dist-web/useStyling.treat.js:30:1)
at Module../node_modules/next/dist/build/webpack/loaders/next-babel-loader.js?!./node_modules/glaze/dist-web/useStyling.treat.js (/Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:201:1)
at __webpack_require__ (/Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:31:31)
at /Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:104:18
at /Users/drk/dev/derekr/blergh.com/node_modules/glaze/dist-web/useStyling.treat.js:107:10
at Script.runInContext (vm.js:131:20)
at Script.runInNewContext (vm.js:137:17)
at module.exports (/Users/drk/dev/derekr/blergh.com/node_modules/eval/eval.js:73:12)
at produce (/Users/drk/dev/derekr/blergh.com/node_modules/treat/webpack-plugin/loader.js:152:14)
Reproduction
Using:
Using the nextjs example app in this repo, upgrade to latest next
or next@canary
and try running yarn dev
. Should see the above error in the next server output.
Expected behavior
yarn dev
works fine, no errors AND Fast Refresh works.
Actual behavior
$ next
ready - started server on http://localhost:3000
warn - dotenv loading was disabled due to the `dotenv` package being installed in: package.json
See more info here: https://err.sh/next.js/env-loading-disabled
warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
> Using "webpackDevMiddleware" config function defined in next.config.js.
> Using external babel configuration
> Location: "/Users/drk/dev/derekr/blergh.com/babel.config.js"
Environment
System:
- OS: macOS 10.15.4
- CPU: (8) x64 Intel® Core™ i7-6820HQ CPU @ 2.70GHz
- Memory: 2.27 GB / 16.00 GB
- Shell: 3.0.2 - /usr/local/bin/fish
Binaries:
- Node: 12.16.3 - ~/.fnm/current/bin/node
- Yarn: 1.22.0 - /usr/local/bin/yarn
- npm: 6.14.4 - ~/.fnm/current/bin/npm
Browsers:
- Chrome Canary: 84.0.4146.4
- Firefox Developer Edition: 75.0
- Safari: 13.1
npmPackages:
- glaze: ^0.5.1 => 0.5.1
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
ReferenceError: $RefreshReg$ is not defined in 9.4 ... - GitHub
Describe the bug. Using latest Next.js version which enables Fast Refresh by default compilation seems to break with the error: ReferenceError: ...
Read more >ReferenceError: $RefreshReg$ is not defined - Stack Overflow
In my case, this error was happening when overwriting Webpack's mode option. After removing the line below I stopped receiving the error.
Read more >[Solved]-ReferenceError: $RefreshReg$ is not defined-Reactjs
[Solved]-ReferenceError: $RefreshReg$ is not defined-Reactjs ... I'm not using typescript for the Web Worker but adding this helped fix the error.
Read more >@next/react-refresh-utils - npm
This is an experimental package that provides utilities for React Refresh. Its API is not stable as that of Next.js, nor does it...
Read more >Resolved React refresh webpack plugin throws $RefreshSig ...
While using Babel transform and the webpack hot reload middleware approach ... an uncaught ReferenceError: $RefreshSig$ is not defined error ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thank you for reporting! This might be a problem with next-transpile-modules or treat itself.
In the next few days, I’m going to publish a runtime CSS-in-JS library, acting as a new base for glaze, replacing treat. The upcoming solution weighs <2 KB and decomposes styles into atomic rules.
Please stay tuned for a new core release which will possibly resolve this issue.
please please fix the demo with nextjs, really want to try