HMR is fetching multiple updated modules triggered by the same change in parallel and not in series

[rashfael]

Describe the bug

My original problem that lead me to this was:
When using vite, vue script setup, and pug as a template language, and updating both the script and template contents at once, the template compilation doesn't get the right context and produces wrong output, leading to errors in the browser.
This only seems to happen with pug (or other template preprocessors). When using plain html templates, the file is not split into multiple modules, even when changing both script and template at the same time.

I think this might be more a bug in vite than vue, because @vitejs/plugin-vue relies on the order in which modules are requested: the script being compiled first and when afterwards the template is compiled, accessing the cached script with the right bindingMetadata.

This doesn't seem to be the case however, the vite hmr client requests both modules in parallel, as seen in the devtools network tab here:

If I modify the queueUpdate function I instead can get this behaviour, which fixes my problem:

Looking closer, queueUpdate is called with the output from fetchUpdate, which seems to immediately fetch the module, and only queueing re-importing and not the module request itself.
For the pug template to get the proper bindingMetadata however, compilation of the script module needs to finish before the template is requested.

Here is my hacky fix, but I'm not sure if this is the correct thing to fix or if maybe changing how @vitejs/plugin-vue handles multiple modules is a better approach.

Reproduction

https://github.com/rashfael/vite-hmr-multiple-modules

Steps to reproduce

Vite HMR repro

0. npm ci
1. npm run dev
2. open localhost:5173
3. change both script and template in App.vue and save at the same time
4. Get Property "foo" was accessed during render but is not defined on instance. in the browser console

System Info

System:
    OS: Linux 6.0 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 PRO 6850H with Radeon Graphics
    Memory: 12.41 GB / 30.63 GB
    Container: Yes
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 19.0.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/bin/npm
  Browsers:
    Chromium: 107.0.5304.110
    Firefox: 106.0.5
  npmPackages:
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0
    vite: ^3.2.4 => 3.2.4

Used Package Manager

npm

Logs

Browser logs

[vite] connected.
[Vue warn]: Property "foo" was accessed during render but is not defined on instance.   
[vite] hot updated: /src/App.vue
[Vue warn]: Property "foo" was accessed during render but is not defined on instance. 
[vite] hot updated: /src/App.vue?vue&type=template&lang.js

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 vuejs/core 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.

[rashfael]

Another, perhaps better solution is to fix this in @vitejs/plugin-vue by compiling the script when transforming the template, if it's not in the cache yet. The request for the script module that comes too late can then grab the compiled script from cache.
Something like this?
rashfael/vite-hmr-queue-updates@7d05692