Hydration fail to retrieve hoisted `el` in HMR
Version
3.2.30
Reproduction link
Steps to reproduce
npm run dev
in Stackblitz- Modify the template in App.vue
- See rerender error in the client console
What is expected?
No error, and the HMR works
What is actually happening?
Error in console, and HMR does not work.
This has originally reported in Nuxt https://github.com/nuxt/nuxt.js/issues/11956
After some investigation, we managed to reproduce that in plain Vite (see the repro).
The error will disappear by changing one of the following conditions:
- Switch to
createApp
instead ofcreateSSRApp
to do a client render - Remove SSR generate content inside #app
I guess the root cause might be during the hydration. The el
of text nodes aren't retrieved correctly to the vnode, casuing the vnode.el
get null
and HMR failed to update the DOM.