HMR not updating template comments correctly

[TechAkayy]

Describe the bug

Vite Vue 3 project, dev mode! This issue could be related to vite client (that manages hot updates on the page).

When updating comments in the template section of an .vue SFC, the comments are not correctly HMRed. Only on a page refresh, the updated comments are rendered correctly.

Steps to reproduce:

1. In the stackblitz reproduction link, in terminal (if not auto-started), npm run dev to serve the vite app. Open App.vue.

2. We need to inspect the console > elements tab of the rendered app, so in stackblitz, click on "Open in New Window" button which is found on the top right. This will open the app in an external window. In this external window, please open the console > elements tab.

3. You can see the:
   

4. Now, back in the editor, paste the below in the middle of template content:

  <!-- Middle component start -->
  <HelloWorld />
  <!-- Middle component end -->

5. Check console in the external window. HMR did not update the newly added comments, and has weirdly duplicated the comments from the "bottom" portion elements. Even if you save (cmd+s on editor window), the content stays as it is.
   
6. Now, refresh the external window. The updated comments are now rendered correctly.
   
7. Now, again, in editor, select the previously pasted code (from step 4 above), delete it.
8. Check console in the external window. HMR again weirdly removed the comments from the "bottom" portion and not the "middle" portion that we just deleted from the template.
   
9. To summarise, continuous HMR messes up the comments in the rendered app. I couldn't speculate as to why this is happening.

Some additional observations (Webpack):

• I tested the above with Vue-cli-5.0.0-rc.2 based Vue-3 project. Comments were perfectly HMRed. No mess up.
• I tested the above with Vue-cli-4 based Vue-2 project (template tag should open as <template comments>). Comments were perfectly HMRed. No mess up.

Comments in templates are quite critical during development and the above is a very very simplistic reproduction. Comments are quite often used during troubleshooting complex apps eg:vuejs/vue#6150 (searching the rendered app's console > elements tab), and has great capability to be leveraged in external tooling integrations (I'm working on one).

I believe this is an HMR issue, but if it's in fact vue-core issue, please let me know, I can log it there.

Please kindly look into this. Vite is super fast, and would love to see HMR perfected :-) Thanks a lot for the magic.

Reproduction

https://stackblitz.com/edit/vitejs-vite-mwwa3m?file=src/App.vue

System Info

System:
    OS: macOS 11.5.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 508.45 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.7.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.20.3 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 88.1.19.86
    Chrome: 97.0.4692.99
    Chrome Canary: 100.0.4865.0
    Edge: 90.0.818.46
    Firefox: 69.0.1
    Safari: 14.1.2

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 https://github.com/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.

[sapphi-red]

It seems it's an upstream issue as it is discussed in the upstream issue. vuejs/core#5357

[sapphi-red]

Closing as it's already been tracked in the upstream.