Doesn't compile when using react-refresh-webpack-plugin

[Elindorath]

Describe the bug

Hi there!

I'm currently developing a react app with typescript, babel and webpack. I use react-refresh-webpack-plugin for fast refresh and it works well except in one case:
when a file in the dependency tree of a *.css.ts file contains a piece of code flagged as "dynamic state" executed during file evaluation.

In the linked reproduction repository, I have only one .css.ts file (src/global.css.ts). It imports another file (src/colors.ts). This file exports the variable Colors which is built when evaluating the file.

I did a little digging and here's what I found:

• react-refresh generate code to register what could change between two refreshes.
  In the repro, it add two lines at the end of the src/colors.ts file:

  __webpack_require__.$Refresh$.register(_c, "Colors$Object.entries(colors).reduce");
  __webpack_require__.$Refresh$.register(_c2, "Colors");

• __webpack_require__.$Refresh$ is undefined when running evalCode on the source in the processVanillaFile function, resulting in a TypeError

Unfortunately, my understanding on this stops here, but it doesn't seem right to have those lines in a source only used to generate css files.

Reproduction

https://github.com/elindorath/vanilla-extract-repro

System Info

System:
  OS: macOS 12.3
  CPU: (10) arm64 Apple M1 Pro
  Memory: 92.61 MB / 16.00 GB
  Shell: 5.9 - /opt/homebrew/opt/zsh/bin/zsh
Binaries:
  Node: 18.11.0 - ~/.config/asdf/installs/nodejs/18.11.0/bin/node
  Yarn: 1.22.19 - ~/.config/asdf/installs/yarn/1.22.19/bin/yarn
  npm: 8.19.2 - ~/.config/asdf/installs/nodejs/18.11.0/bin/npm
Browsers:
  Chrome: 106.0.5249.119
  Firefox: 102.0.1
  Safari: 15.4
npmPackages:
  @vanilla-extract/css: ^1.9.1 => 1.9.1
  @vanilla-extract/dynamic: ^2.0.2 => 2.0.2
  @vanilla-extract/sprinkles: ^1.5.0 => 1.5.0
  @vanilla-extract/webpack-plugin: ^2.2.0 => 2.2.0
  webpack: ^5.74.0 => 5.74.0

Used Package Manager

yarn

Logs

yarn run v1.22.19
$ NODE_ENV=development webpack serve --config webpack.config.ts --mode development
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.36:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/elindorath/dev/mine/vanilla-extract-repro/dist' directory
asset bundle.js 4.16 MiB [emitted] (name: main)
asset ./index.html 467 bytes [emitted]
runtime modules 32.2 KiB 16 modules
modules by path ./node_modules/core-js-pure/ 122 KiB 119 modules
modules by path ./node_modules/@pmmmwh/react-refresh-webpack-plugin/ 52.7 KiB 23 modules
modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules
modules by path ./node_modules/webpack/hot/*.js 4.3 KiB 4 modules
modules by path ./node_modules/react/ 127 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
modules by path ./node_modules/react-dom/ 1000 KiB 3 modules
modules by path ./src/ 1.29 KiB 2 modules
modules by path ./node_modules/react-refresh/ 20.2 KiB 2 modules
modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
+ 4 modules

ERROR in ./src/global.css.ts
Module build failed (from ./node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) TypeError: Cannot read properties of undefined (reading 'register')
    at processResult (/Users/elindorath/dev/mine/vanilla-extract-repro/node_modules/webpack/lib/NormalModule.js:755:12)
    at /Users/elindorath/dev/mine/vanilla-extract-repro/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/elindorath/dev/mine/vanilla-extract-repro/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /Users/elindorath/dev/mine/vanilla-extract-repro/node_modules/loader-runner/lib/LoaderRunner.js:195:20
    at context.callback (/Users/elindorath/dev/mine/vanilla-extract-repro/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /Users/elindorath/dev/mine/vanilla-extract-repro/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.dev.js:91:5
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
 @ ./src/main.tsx 4:0-22

webpack 5.74.0 compiled with 1 error in 937 ms

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[phil-lgr]

I just hit a similar issue

In my case, the first change to a .css.ts/js file is fine, HMR works, and then, on the second change I get this:

Have you tried disabling react-refresh?

[phil-lgr]

Without react-refresh (no babel plugin and no react-refresh webpack plugin) I get this:

The error seems to come from the hot reloaded vanilla-extract module call :

Could we have an issue just with webpack HMR and vanilla-extract?

[okonet]

I see a similar issue using Storybook:

with the following config:

module.exports = {
  stories: ['../packages/**/*.stories.tsx'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
    '@storybook/addon-links',
    '@storybook/addon-storysource',
    '@storybook/preset-scss',
    'storybook-addon-swc',
  ],
  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
  typescript: {
    check: false,
  },
  core: {
    builder: 'webpack5',
    options: {
      lazyCompilation: true,
    },
  },
  framework: '@storybook/react',
  features: {
    storyStoreV7: true,
  },
};

[askoufis]

@Elindorath Going to close this issue as it's a duplicate of #679 and #1043 (preferring 1043 as this issue has some other potentially unrelated comments). #679 contains a solution to the problem. In your case you can apply this fix by moving Colors to a separate file.

The issue arises from react refresh thinking that Colors is a component (more detailed explanation here). This issue will hopefully go away in the future as the webpack integration is migrated to the new VE compiler (currently still experimental).

@phil-lgr @okonet You may be able to fix your problems with the advice mentioned above, however if you believe your issues are caused by something else, please feel free to create a separate issue with a reproduction.