Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hydration fail to retrieve hoisted el in HMR #5405

Closed
antfu opened this issue Feb 11, 2022 · 0 comments
Closed

Hydration fail to retrieve hoisted el in HMR #5405

antfu opened this issue Feb 11, 2022 · 0 comments
Labels
p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. feat: hmr feat: ssr 🐞 bug Something isn't working

Comments

@antfu
Copy link
Member

antfu commented Feb 11, 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 nuxt/nuxt#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.

@antfu antfu added 🐞 bug Something isn't working feat: ssr p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. labels Feb 11, 2022
antfu added a commit that referenced this issue Feb 11, 2022
@antfu antfu changed the title Hydration fail to retrieve el with mixed nodes Hydration fail to retrieve hoisted el in HMR Feb 11, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
p4-important Priority 4: this fixes bugs that violate documented behavior, or significantly improves perf. feat: hmr feat: ssr 🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant