HMR starts losing transform results after changing template language to pug and back

[IlyaSemenov]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

I am developing a Vite plugin (vite-plugin-vue-css-module) that slightly modifies Vue templates before they are actually rendered. For that, I am adding the transform hook (with enforce: 'pre') where I modify user-provided source code.

I test my modifications to work fine in various user flows, including Vue and pug templates, and of course HMR. I've noticed that vite-plugin-vue works differently when doing HMR on Vue and pug templates, but what I expect is that it behaves consistently on the same type of template after I switch between languages there and back.

What is actually happening is that HMR flow is different on these scenarios:
A. User is only using Vue templates.
B. User was using Vue templates then switched to pug and then back.

Initially, HMR updates for Vue templates go like:

ℹ hmr update /app.vue                                                                             11:04:05 PM
ℹ hmr update /app.vue (x2)                                                                        11:04:06 PM
ℹ hmr update /app.vue (x3)                                                                        11:04:07 PM
ℹ hmr update /app.vue (x4)    

after changing <template> to <template lang="pug">, it becomes:

ℹ hmr update /app.vue?vue&type=template&lang.js                                                   11:06:37 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x2)                                              11:06:39 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x3)                                              11:06:40 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x4)                

but after changing it back to <template>, the HMR method is not restored to full SFC transform, it still goes with ?type=template submodule updates:

ℹ hmr update /app.vue?vue&type=template&lang.js (x5)                                              11:08:04 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x6)                                              11:08:05 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x7)                                              11:08:07 PM
ℹ hmr update /app.vue?vue&type=template&lang.js (x8)    

While this itself doesn't introduce an immediate user-facing problem, it breaks things for plugin authors.

Namely, after changing language from none to pug and then back, all code modifications returned by transform hooks are completely ignored (see reproduction).

I suspect this also could lead to other subtle problems and/or inefficiencies.

Reproduction

https://stackblitz.com/edit/nuxt-starter-anyrc6?file=app.vue,nuxt.config.ts

Steps to reproduce

Run npm install followed by npm run dev (happens automatically in Stackblitz).

Then:

• try modifying div text in app.vue to see HMR+transform working;
• then try changing the language to pug (and dedenting the code) to see HMR+transform still working;
• then change template language back to none, after which HMR will work but transform will not.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm

Used Package Manager

npm

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.

[Lutymane]

Having the same issue! Surprisingly with a plugin of very similar concept haha. It occurs when doing any changes to the Vue SFC. I can see HMR grabs original file to update template virtual modules instead of its transformed version. Only Vite restart helps. Although plugin could be updated to transform the virtual module itself as well.