HMR doesn't work in freshly installed Vite Vanilla-Extract React App

Describe the bug

HMR doesn’t work in a newly installed App with React, Vanilla-Extract and Vite. All packages are on the newest version. Instead the page reloads and React loses its State whenever Test.css.ts is safed. yarn create vite vite-vanilla-extract-test --template react-ts No error messages were displayed (vite: logLevel: “error”, vanillaExtractPlugin identifiers:debug).

Link to reproduction

Link

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: Windows 10 10.0.19044 CPU: (8) x64 Intel® Core™ i7-8550U CPU @ 1.80GHz Memory: 5.70 GB / 15.57 GB Binaries: Node: 14.18.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.17 - C:\Program Files\nodejs\yarn.CMD npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.43) npmPackages: @vanilla-extract/css: ^1.6.8 => 1.6.8 @vanilla-extract/vite-plugin: ^3.1.2 => 3.1.2 vite: ^2.8.0 => 2.8.0

[tamanugi]

@mattcompiles

this comment’s issues fixed on 3.1.7 🎉 https://github.com/seek-oss/vanilla-extract/issues/578#issuecomment-1133020076

Thank you😍

[drywolf]

I found a workaround by forcing the vite-plugin to a specific older version, calling: yarn add @vanilla-extract/vite-plugin@2.1.3

and in the vite.config.ts using: vanillaExtractPlugin({devStyleRuntime: "vanilla-extract"})

(this option for the plugin is only available in the older version, versions >= 3.0.0 had this option removed)

So this issue might still be related to #346 #422