Subscribe on changes!

Hydration fail to retrieve hoisted `el` in HMR

avatar
Feb 11th 2022

Version

3.2.30

Reproduction link

stackblitz.com

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 of createSSRApp 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.