npm i to install dependencies then npm run dev to run.
In your browser go to http://localhost:3001. Note the error in the console.
In your code editor go to src/App.vue.
Remove the comment and reload the page. The error should be gone.
What is expected?
Hydration succeeds without errors.
What is actually happening?
The comment in the <transition> causes a hydration mismatch error:
[Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom.
at <Layout>
at <LayoutModal >
at <App>
The text was updated successfully, but these errors were encountered:
Version
3.2.29
Reproduction link
https://github.com/AaronBeaudoin/vite-vue-ssr-bug-repr/tree/transition-comment
Steps to reproduce
npm i
to install dependencies thennpm run dev
to run.http://localhost:3001
. Note the error in the console.src/App.vue
.What is expected?
Hydration succeeds without errors.
What is actually happening?
The comment in the
<transition>
causes a hydration mismatch error:The text was updated successfully, but these errors were encountered: