Vue HMR does not work unless component has an active instance

[ElMassimo]

Describe the bug

This bug is related to #131, and is the same one described in vuejs/core#4757.

For example, in a Vue app with Vue Router:

When a page component file is modified, if the page:

• is the current route HMR works.
• is not the current route, HMR does not work

As a result, when modifying a component that is not the current route, the HMR update is sent as usual, but because the component has no active instances, the Vite client does not update the module.

If the modified page component has already being imported, when its route is visited, the original module is used, which doesn't include the changes since it was never updated by HMR.

---

It's not specific to Vue Router though, it could happen for any development flow where a component is imported, but it might not have an active instance.

For example:

<Welcome v-if="condition"/>

If Welcome.vue is modified when the condition is false, then once the condition is true, an outdated version of the component will be rendered.

The reason I mention Vue Router first, is that it's a very typical way for users to experience the bug.

Reproduction

github.com

System Info

System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-3635QM CPU @ 2.40GHz
    Memory: 53.61 MB / 8.00 GB
    Shell: 5.8 - /usr/local/bin/zsh
  Binaries:
    Node: 16.5.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.19.1 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 94.0.4606.71
    Firefox: 91.0
    Safari: 14.0.1
  npmPackages:
    @vitejs/plugin-vue: ^1.9.3 => 1.9.3
    vite: ^2.6.3 => 2.6.4

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• 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.
• 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.
• The provided reproduction is a minimal reproducible example of the bug.

[ElMassimo]

Since plugin-vue is still providing _sfc_main as a second parameter to the HMR createRecord function, it's likely that it can be fixed in vue-next instead.

[ElMassimo]

Fixed in vuejs/core@9e3d773