HMR broken with @vanilla-extract/vite-plugin v4.0.1 and later

Question

HMR broken with @vanilla-extract/vite-plugin v4.0.1 and later

jakst opened this issue 4 months ago · comments

Describe the bug

After upgrading from v3.9.5 to v4.0.3 HMR broke in our setup. Seem like v4.0.0 actually works alright and it broke in v4.0.1. Downgrading to v4.0.0 fixes the problem.

Reproduction

https://github.com/jakst/vanilla-extract-hmr

Clone repo
run pnpm install
Start dev server
edit src/styles.css.ts
Observe HMR not functioning, and page fully reloading
Downgrade @vanilla-extract/vite-plugin to v4.0.0 (pnpm add -E @vanilla-extract/vite-plugin@4.0.0)
Repeat steps 3 and 4
Observe HMR working properly

System Info

System:
  OS: macOS 14.2
  CPU: (12) arm64 Apple M3 Pro
  Memory: 822.20 MB / 36.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.10.0 - ~/.proto/shims/node
  Yarn: 4.0.2 - ~/.proto/shims/yarn
  npm: 10.2.3 - ~/.proto/shims/npm
  pnpm: 8.15.1 - ~/.proto/shims/pnpm
  bun: 1.0.25 - ~/.proto/shims/bun
  Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
Browsers:
  Brave Browser: 120.1.61.109
  Chrome: 121.0.6167.139
  Edge: 121.0.2277.98
  Safari: 17.2
npmPackages:
  @vanilla-extract/css: 1.14.1 => 1.14.1
  @vanilla-extract/recipes: 0.5.1 => 0.5.1
  @vanilla-extract/vite-plugin: 4.0.3 => 4.0.3
  vite: 5.0.12 => 5.0.12

Used Package Manager

pnpm

Logs

No response

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.

Remus Mate · Answer 1 · Tue Feb 06 2024 15:31:03 GMT+0800 (China Standard Time)

Hi @jakst, thanks for reporting this.

Would you mind trying out this snapshot in your app (not the reproduction)? It's a significant change and we don't have extensive test coverage, so I want to make sure we don't break unrelated things.

Jakob Norlin · Answer 2 · Tue Feb 06 2024 18:08:12 GMT+0800 (China Standard Time)

Hey @mrm007 sure! Seems to work fine so far, but I'll keep that version for a while and report back if anything breaks.

Remus Mate · Answer 3 · Tue Feb 06 2024 18:45:07 GMT+0800 (China Standard Time)

Can you share the list of Vite plugins you're currently using?

Arne-Christian Rundereim · Answer 4 · Tue Feb 06 2024 19:23:15 GMT+0800 (China Standard Time)

I see the same issue. The snapshot also fixes it for me.

plugins: [react(), vanillaExtractPlugin({})],

    "@vitejs/plugin-react-swc": "^3.6.0",
    "vite": "^5.0.11"
+ vanilla-extract

Jakob Norlin · Answer 5 · Tue Feb 06 2024 20:20:41 GMT+0800 (China Standard Time)

import { sentryVitePlugin } from '@sentry/vite-plugin'
import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
import react from '@vitejs/plugin-react-swc'
import Unfonts from 'unplugin-fonts/vite'
import { defineConfig } from 'vite'
import relay from 'vite-plugin-relay'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    sourcemap: true,
  },
  plugins: [
    tsconfigPaths(),
    vanillaExtractPlugin(),
    react(),
    relay,
    TanStackRouterVite(),
    Unfonts({ }),
    sentryVitePlugin({ }),
  ],
})

Remus Mate · Answer 6 · Tue Feb 06 2024 20:29:57 GMT+0800 (China Standard Time)

Thanks gents, that's very promising. We'll release the fix soon.

Remus Mate · Answer 7 · Fri Feb 09 2024 12:24:53 GMT+0800 (China Standard Time)

@vanilla-extract/vite-plugin@4.0.4 has been released. Thank you all for the help.