HMR not working when vue scoped style block is removed

Describe the bug

Modules are not removed from the ModuleGraph, even when they don’t exist anymore.

This can break HMR updates of other modules.

Reproduction

Start with two style blocks in a vue SFC:

<style scoped>
...
</style>

<style module>
...
</style>

Changes within both style blocks trigger correct HMR updates.

Now, remove the first block completely. Then update the content of the remaining block. This will trigger a HMR update for the missing block and the client is not updated.

The same thing happens when just changing a single <style scoped> to <style module>.

System Info

I’m observing this with vite-plugin-vue2, but this should be the same with the vue 3 plugin - the code is the same, because the problem is in the invalid modules list provided in the context to handleHotUpdate.

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 5.12 Alpine Linux
    CPU: (32) x64 AMD Ryzen 9 3950X 16-Core Processor
    Memory: 103.17 GB / 125.81 GB
    Container: Yes
    Shell: 1.32.1 - /bin/ash
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.13.0 - /usr/local/bin/npm
  npmPackages:
    vite: 2.3.5 => 2.3.5
    vite-plugin-vue2: 1.5.2 => 1.5.2

Used package manager: yarn

Logs

Once the module graph is in the invalid state, vite will print the following when changing the remaining <style module> block:

[vite] hmr update [...]?vue&type=style&index=0&scoped=true&lang.scss

The reference for “scoped” is still there, even though it’s now a module.

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• 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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[wolfgangwalther]

I’m now on 2.8.6 and can’t reproduce it anymore. It must have been fixed in the meantime.

[bluwy]

@wolfgangwalther Does this still happen with the latest version of Vite and @vitejs/plugin-vue? A repo/stackblitz would be great too to quickly spin up and test it.