Vite HMR: Vanilla Extract styles are lost after rendering an error boundary

[christoph-fricke]

Reproduction

I am using vanilla-extract to style a Remix-Vite application. Recently I have noticed that the app sometimes loses it styles during development when an error boundary has been shown. I narrowed it down to only happen in combination with HMR and triggering error boundaries. Either while in an error boundary or even after leaving the boundary.

I am not sure if this is a problem in Remix or vanilla-extract. Since the error-boundary seems to be a part of the problem, I started with opening this issue in Remix.

Playground Link: Stackblitz

The playground app contains some links to navigate between routes as well as an route that throws a loader error. Clicking "Todo (Will Error)" will cause a error boundary to be rendered. All pages and the error boundary contain an element (Button component) that has been styled with vanilla-extract.

1. Run the app in dev mode (npm run dev)
2. Making any changes to the app (this triggering HMR) and navigating to the error boundary causes the styled element to lose its styles.
3. Having navigated to the error boundary and back before making changes also causes the style loss once HMR is triggered.

System Info

(Stackblitz environment)

System:
    OS: Linux 5.0 undefined
    CPU: (6) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
    @remix-run/dev: * => 2.9.2 
    @remix-run/node: * => 2.9.2 
    @remix-run/react: * => 2.9.2 
    @remix-run/serve: * => 2.9.2 
    vite: ^5.1.0 => 5.2.11

Used Package Manager

npm

Expected Behavior

The application remains styled during HMR while or after showing an error boundary.

Actual Behavior

The styled button element in the app loses its styles, which seem to only be recoverable by reloading the application. Since HMR is involved, this problem only occurs in development.

[PuruVJ]

Facing same issue, with css modules. I am unable to test any styles on ErrorBoundaries and have to shoot in the dark. Then building the project and starting the dev server is the only way I am able to check if the styles look decent