-
-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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 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
Comments
sxzz
added
scope: ssr
🔨 p3-minor-bug
Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
labels
May 25, 2024
duplicate of #7285 |
Closing as duplicate |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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: