You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Describe the Bug
A hydration mismatch occurs inside a TransitionGroup when a comment is present.
[Vue warn]: Hydration children mismatch on <div>…</div>
Server rendered element contains more child nodes than client vdom.
at <TransitionGroup tag="div" >
at <App>
Please, remove any comments and avoid introducing conditional elements that do not match between server and client renders. Specifically, instead of including a comment or an empty
withv-if="false", restructure your code to eliminate such nodes. Ensure that the rendered output on both the server and client sides remains consistent by using a single source of truth for your data rendering, thereby preventing discrepancies during the hydration process.
Vue version
3.5.x
Link to minimal reproduction
https://stackblitz.com/edit/vue-ssr-example-9tg6p3?file=app.js
Steps to reproduce
Steps to Reproduce
Describe the Bug
A hydration mismatch occurs inside a TransitionGroup when a comment is present.
Code Example
What is expected?
No hydration error
What is actually happening?
A hydration error
System Info
Any additional comments?
Related Nuxt issue: #28381
The text was updated successfully, but these errors were encountered: