Hydration mismatch when using with JSX

[sxzz]

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

• Open reproduction link.
• An error appears in the output.

What is expected?

No errors.

What is actually happening?

Hydration completed but contains mismatches. error

System 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:

• Use a template string <button>{ `Increase: ${count}` }</button>
• Use <button><span>Increase: </span><span>{ count.value }</span></button>. Only one text node in elements.

This issue was originally reported by @icarusgk.

[edison1105]

duplicate of #7285

[yyx990803]

Closing as duplicate