question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Vite 3] `@vitejs/plugin-vue` breaks HMR when used with `vite-plugin-ssr`

See original GitHub issue

Describe 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

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:12 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
Demivancommented, Jul 29, 2022

Cause:

vite-plugin-ssr module id (url) looks like this: /pages/index.page.client.vue?extractExportNames&lang.vue

plugin-vue assumes that it is a main vue module because there is no type= 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

1reaction
AaronBeaudoincommented, Sep 7, 2022

Just pinging this issue to see if there’s been any progress in the last 3 weeks.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found