Hydration mismatch when using with JSX #11012
Labels
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
scope: ssr
Vue version
3.4.27
Link to minimal reproduction
https://play.vuejs.org/#__SSR__eNp9UsFOAkEM/ZVmLkLcgImeEE3UeMBENEq8OB5wt+DA0tnMdBBD+Hc7OwIbot6m7eub99qu1VVVdZYBVU/1fe5MxeCRQ3WpySwq6xjWUODEEN5YiQmJM3A4gQ1MnF3AkfQeNbC5wzHjy9AWmP0EI1xxndj2aCVNWp1r0pRb8gz3X9eB2RJcHH7WarXh4hLWmgASNreBWIAionXSFhKQJwdHkKANBS2t3mterbJEAfK5pZvS5HOtetuOyNhZjsuAx8cRtcng9UC7UA0o5jz2hKMt5vZdb1HGpq2p300zlOlJwLioSiGRCKBfmGX9kOfObjeVuqnW7zY6VKbYi+OJmXZm3pIsqHagVS6zMSW6h4qNTCT62Hkbl6X9vKtz7AJm23z+gfn8l/zMr2JOq0eHHt1S1rKr8dhNkVP59nkok2gUF7YIpaD/KT6ht2WIGhPsOlAhshu4Wu2gPh1D05G/XTGS35qKQtM2km85mngWf1nfyz3tnNV9shO1+QY07PS3
Steps to reproduce
What is expected?
No errors.
What is actually happening?
Hydration completed but contains mismatches.
errorSystem Info
No response
Any additional comments?
On the client side,
<button>Increase: { count.value }</button>
is essentially just one text node. This means it merges the static node"Increase: "
and the dynamic node{ count.value }
.But on the server side, it will be two separate nodes. This results in one more node on the server side compared to the client.
Workaround:
<button>{ `Increase: ${count}` }</button>
<button><span>Increase: </span><span>{ count.value }</span></button>
. Only one text node in elements.This issue was originally reported by @icarusgk.
The text was updated successfully, but these errors were encountered: