-
-
Notifications
You must be signed in to change notification settings - Fork 153
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
HMR is fetching multiple updated modules triggered by the same change in parallel and not in series #28
Labels
Comments
Another, perhaps better solution is to fix this in |
rashfael
added a commit
to rashfael/vite-plugin-vue
that referenced
this issue
Feb 14, 2023
rashfael
added a commit
to rashfael/vite-plugin-vue
that referenced
this issue
Feb 14, 2023
9 tasks
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
npm ci
npm run dev
localhost:5173
Property "foo" was accessed during render but is not defined on instance.
in the browser consoleSystem Info
Used Package Manager
npm
Logs
Browser logs
Validations
The text was updated successfully, but these errors were encountered: