"ReferenceError: $RefreshReg$ is not defined" when using React + Yarn Workspaces

Describe the bug

I encountered this problem in our Yarn Workspaces setup, where a shared design-system package uses Vanilla Extract to house token values, it creates a theme, and also contains shared React components. These are all exported through a barrel index.ts file.

We have two React apps that import from this - a Create React App and a Next App. Both apps encounter this error during compilation when importing from design-system in development mode. The CRA app can ‘bypass’ it by disabling Fast Refresh altogether, but this isn’t an option for Next.

In my testing, I believe this error only occurs when a React component is exported alongside the Vanilla Extract createTheme in a separate workspace package. In testing I was able to createTheme in a standalone package and import and use it successfully in the Next app package. And I was able to export standalone React components with applied Vanilla Extract style() without issue. Only when using React components and createTheme in the same package did I encounter this issue.

error - ./pages/home.css.ts
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: $RefreshReg$ is not defined

Any ideas what might be causing this?

Link to reproduction

I created a simple repo to reproduce: https://github.com/Jpoliachik/ve-workspace-react-issue

System Info

Output of npx envinfo --system --npmPackages @vanilla-extract/css,@vanilla-extract/webpack-plugin,@vanilla-extract/esbuild-plugin,@vanilla-extract/vite-plugin,@vanilla-extract/sprinkles,webpack,esbuild,vite --binaries --browsers:

  System:
    OS: macOS 12.2
    CPU: (8) arm64 Apple M1
    Memory: 658.64 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 3.2.0 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 101.0.4951.54
    Safari: 15.3