search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.86k stars 2.49k forks source link

🐛 BUG: HMR with vue components causes a hydration mismatch error #3559

Closed tony-sull closed 2 years ago

tony-sull commented 2 years ago

What version of astro are you using?

1.0.0-beta.42

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

When editing a vue component in dev, the page flashes with the new content then reverts back after vue hits the following error

Hydration completed but contains mismatches.

It looks like vue core has a few recent changes that are related to hydration and HMR that may be related to this regression

Reproduction

To reproduce, clone the latest framework-vue starter and change any of the rendered HTML - the brower flashes with the update then reverts

According to Vue's docs, any updates to the <template> or <style> should be hot reloaded without losing the component state, any changes to the <script> should refresh the component back to it's default state in case any lifecycle hooks had side effects

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-vue?file=package.json&on=stackblitz

Participation

tony-sull commented 2 years ago

Tried rolling back a few versions with both Vue and Astro and the issue still reproduces, not sure how recent this regression is?