[Vite 3] `@vitejs/plugin-vue` breaks HMR when used with `vite-plugin-ssr`
See original GitHub issueDescribe the bug
HMR doesn’t work.
== EDIT ==
The root cause seems to be that @vitejs/plugin-vue is not respecting ecosystem query parameters. See discussion below.
=========
I had a quick look at it: the signal is not being sent to the browser.
Note that the socket message {"type":"update","updates":[{"type":"js-update","timestamp":1658677022754,"path":"/pages/index.page.client.vue?extractExportNames&lang.vue" is not enough (it only updates the ?extractExportNames version of the module).
The terminal says:
5:38:42 PM [vite] hmr update /pages/index.page.client.vue?extractExportNames&lang.vue
But that’s not correct as it should say:
5:38:42 PM [vite] hmr update /pages/index.page.client.vue?extractExportNames&lang.vue
5:38:42 PM [vite] hmr update /pages/index.page.client.vue
The last line is missing.
Reproduction
https://github.com/brillout/vps-issue-client-only-hmr
System Info
System:
OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
CPU: (2) x64 Intel(R) Celeron(R) N4020 CPU @ 1.10GHz
Memory: 224.54 MB / 2.71 GB
Container: Yes
Shell: 5.0.3 - /bin/bash
Binaries:
Node: 18.0.0 - ~/.config/nvm/versions/node/v18.0.0/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.6.0 - ~/.config/nvm/versions/node/v18.0.0/bin/npm
Browsers:
Firefox: 97.0.1
npmPackages:
@vitejs/plugin-vue: ^3.0.1 => 3.0.1
vite: ^3.0.2 => 3.0.2
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 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.
Issue Analytics
- State:
- Created a year ago
- Comments:12 (8 by maintainers)
Top Results From Across the Web
HMR API - Vite
This is the client HMR API. For handling HMR update in plugins, see handleHotUpdate. The manual HMR API is primarily intended for framework...
Read more >vite-plugin-ssr
Use any UI framework (React, Vue, Svelte, Solid, . ... With vite-plugin-ssr , you integrate tools manually and keep architectural control. Learn more....
Read more >Why we switched from Webpack to Vite - Hacker News
I tried Vue 3 with Vite and I was blown away how much dev time it saves. ... ViteJS is really faster compared...
Read more >Vite (@vite_js) / Twitter
Zero-config PWA Framework-agnostic Plugin for Vite and Integrations ... No Webpack and smaller install size - Zero config - Vue 2 + 3,...
Read more >The Vite Ecosystem - patak-dev
But the React ecosystem heavily relies on babel for HMR and other ... Support for Vue 3 is achieved with @vitejs/plugin-vue, and Vue...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Cause:
vite-plugin-ssrmodule id (url) looks like this:/pages/index.page.client.vue?extractExportNames&lang.vueplugin-vueassumes that it is a main vue module because there is notype=in query string and updates it instead of module with id/pages/index.page.client.vue:https://github.com/vitejs/vite/blob/364aae13f0826169e8b1c5db41ac6b5bb2756958/packages/plugin-vue/src/handleHotUpdate.ts#L36-L38
Just pinging this issue to see if there’s been any progress in the last 3 weeks.