HMR doesn't work when using `useCssModule` with SSR

rvfakie commented 1 year ago

Describe the bug

Bug with HMR, CSS Modules and SCSS mixins imported with vite.

Please see reproduction and link to issue in nuxt. @danielroe has also managed to reproduce this bug. I've attached his reproduction link.

After updating imported scss mixin in _buttons.scss styles for <button> just disappear. Try to edit _buttons.scss style properties and you will see default button styles after HMR.

But if you modify app.vue after modifying _buttons.scss you will see HMR working correct.

Reproduction

https://stackblitz.com/edit/github-cbd5fr?file=vite.config.js

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 116.52 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 16.2

Used Package Manager

npm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

github-cbd5fr (Open reproduction)

sapphi-red commented 1 year ago

It seems SCSS is not necessary to reproduce.

It doesn't work when editing CSS module styles + using useCssModule + SSR. https://stackblitz.com/edit/github-cbd5fr-qeqagm?file=src%2Fmain.ts,src%2FApp.vue

Lustach commented 1 year ago

Hello! If it only reproduce in ssr mode, is it possible to solve this problem?

kier-mc commented 4 months ago

I'm experiencing the same issue. I'm using Nuxt (for context) with <style module lang="scss"> in SFCs. When I update my mixin.scss file in ./assets, all custom styles are removed from the target element, except for the reset I also apply from the same file, interestingly enough). Neither soft nor hard browser reloads will resolve the issue. I need to completely restart the server to resolve it. Editing app.vue as @rvfakie mentioned also works and saves time, but it would be great to see a more robust fix for this.

Neoniq commented 3 months ago

Same here. Nuxt. but im not editing mixins like in comment above, im editing scss module. Also, to reproduce: after page load change something in vue file, save, then change scss module > there you go, html class names stay same but in styles they changed.

Operating System: Windows_NT
Node Version: v20.14.0
Nuxt Version: 3.12.3
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: pnpm@9.4.0
Builder: -
User Config: devtools, ssr, app, primevue, css, modules, swiper, icon, dir, components, srcDir, runtimeConfig, alias, compatibilityDate
Runtime Modules: @pinia/nuxt@0.5.1, @vueuse/nuxt@10.11.0, nuxt-primevue@3.0.0, @nuxt/icon@1.1.1, @nuxt/eslint@0.3.13, @nuxt/image@1.7.0, nuxt-swiper@1.2.2
Build Modules: -

Matheun commented 3 months ago

Exact same issue here.

When i change and save a file thats imported into my main.scss, the hmr wont update despite the terminal saying the hmr has updated.

Whenever i then save the main.scss, the styles on the frontend actually get updated, really need a fix for this

vitejs / vite-plugin-vue