ReferenceError: $RefreshReg$ is not defined using Next.js 9.4

[derekr]

Description

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(R) Core(TM) 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

[kripod]

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.

[derekr]

Exciting stuff! Will the new runtime CSS-in-JS lib support css extraction?

[kripod]

It supports SSR and filtering for critical CSS on the initial page load. I’m planning to release it by Monday.

[IRediTOTO]

Failed to compile.

./src/pages\_app.tsx:16:28
Type error: Type '{ children: Element; nonce: string; }' is not assignable to type 'IntrinsicAttributes & StyleInjectorProviderProps'.
  Property 'nonce' does not exist on type 'IntrinsicAttributes & StyleInjectorProviderProps'.

  14 |   return process.browser ? (
  15 |     // eslint-disable-next-line @typescript-eslint/camelcase, no-undef
> 16 |     <StyleInjectorProvider nonce={__webpack_nonce__}>
     |                            ^
  17 |       {themedComponent}
  18 |     </StyleInjectorProvider>
  19 |   ) : (

I got this error too, very want to test this. I am trying to use nextjs with tailwindcss

[IRediTOTO]

please please fix the demo with nextjs, really want to try