Version

3.2.29

Reproduction link

stackblitz.com

Steps to reproduce

Vite Vue 3.2.29 project, dev mode!

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 (like searching the rendered app's console > elements tab, etc), and has great capability to be leveraged in external tooling integrations (I'm working on one).

What is expected?

New comments in template section should be HMRed correctly

When some existing comments are removed, they should be removed correctly by HMR in the rendered app

What is actually happening?

New comments in template section are not getting rendered on HMR update, instead existing comments are getting duplicated

When some existing comments are removed, the right ones are not removed by HMR, instead some comments below it are getting removed

I initially submitted this in the vite repo, but after looking into plugin-vue, it looks like plugin-vue is not doing anything special with regarding comments w.r.t HMR and liaises with vue-core runtime hmr. So logging this issue here. Thank you for looking into this. Kindly let me know if you require any other info.

I debugged a bit and the problem seems to be here

https://github.com/vuejs/core/blob/5898629d723e82b68e9b17b91bf8b1a8390a3912/packages/runtime-core/src/renderer.ts#L498-L500

I think the solution should be to update the value of n1.el.text before assigning it to n2.el, code show as below. Do you think it's feasible?

n1.el!.text = n2.children

n1.el!.text = n2.children

Thanks @btea , firstly, thank you very much for looking into this issue. Really appreciate your help!

I applied your above suggestion, and tried again in my above reproduction, didn't really fixed it, I was wondering if you tried in the above reproduction and had any luck. Thanks again!

With best regards - @TechAkayy

@TechAkayy I still think the problem is here, you try to debug

@TechAkayy I still think the problem is here, you try to debug

Thanks bunch for the pointer @btea , will give it a shot 👍