Webpack refresh is undefined in Vanilla Extract Monorepo with Gatsby

[joerobot]

Describe the bug

Working with a Vanilla Extract based design system in a yarn workspaces monorepo with Gatsby (Webpack HMR/Fast Refresh) can sometimes trigger __webpack_require__.$Refresh$ to be undefined. This results in a TypeError when @vanilla-extract/integration tries to eval the bundle.

Interestingly, this issue doesn't seem to happen when using a version of the design system from a registry (eg npm), so possibly related to the symlinking involved with a monorepo.

Exploring other issues it seems to be related to importing a mix of react components and non-components. Some issues were resolved by adding a build step to the design system, which I am already doing with Vite.

In my reproduction I've tried condensing the button component to identify a single-line change that can trigger the issue but haven't been able to find a change that reliably causes the issue every time. With the Button at its current complexity, simply adding it to the design system bundle is enough to trigger the error.

Reproduction

https://github.com/joerobot/gatsby-vanilla-monorepo

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 5.81 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.13.0 - ~/Library/Caches/fnm_multishells/62829_1689255458907/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/62829_1689255458907/bin/yarn
    npm: 8.19.3 - ~/Library/Caches/fnm_multishells/62829_1689255458907/bin/npm
    pnpm: 8.0.0 - ~/Library/Caches/fnm_multishells/62829_1689255458907/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 16.5.1

Used Package Manager

yarn

Logs

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')

Validations

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

[joerobot]

From https://github.com/vanilla-extract-css/vanilla-extract/issues/905 the recommended change is to do with SplitChunks, no changes I made had any effect

https://github.com/vanilla-extract-css/vanilla-extract/issues/894 / https://github.com/vanilla-extract-css/vanilla-extract/issues/1043 suggests moving pascal case files to a separate location, in this case would that mean creating separate bundles for components/non-components?

[askoufis]

From #905 the recommended change is to do with SplitChunks, no changes I made had any effect

894 / #1043 suggests moving pascal case files to a separate location, in this case would that mean creating separate bundles for components/non-components?

Yes, you'll need to create separate entrypoints within the same package if you want to expose both react components and styles. Your bundler should be able to handle this if you define multiple entrypoints in the package.json exports key.

[joerobot]

Thanks @askoufis I'll give that a go and report back!

[askoufis]

@joerobot Any update on this?

[joerobot]

Hi @askoufis sorry about the delay.

Yeah this one did work out! Thank you.