Open derekr opened 4 years ago
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.
Exciting stuff! Will the new runtime CSS-in-JS lib support css extraction?
It supports SSR and filtering for critical CSS on the initial page load. I’m planning to release it by Monday.
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
please please fix the demo with nextjs, really want to try
Description
Using latest Next.js version which enables Fast Refresh by default compilation seems to break with the error:
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
ornext@canary
and try runningyarn 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
Environment
System:
Binaries:
Browsers:
npmPackages: