Subscribe on changes!

[Bug Report] <wbr> tag somehow breaks the hoisted static vnode causing hydration mismatch

avatar
May 26th 2022

Vue version

3.2.36

Link to minimal reproduction

https://sfc.vuejs.org/#__SSR__eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZGl2PlxuICAgIEEgPHdicj4gPGNvZGU+MDwvY29kZT4gPHdicj4gQiA8d2JyPiA8Y29kZT4xPC9jb2RlPiBDIDxjb2RlPjI8L2NvZGU+IDx3YnI+IEQgPHdicj4gPGNvZGU+RTwvY29kZT5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHtcbiAgICBcInZ1ZVwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy92dWUucnVudGltZS5lc20tYnJvd3Nlci5qc1wiLFxuICAgIFwidnVlL3NlcnZlci1yZW5kZXJlclwiOiBcImh0dHBzOi8vc2ZjLnZ1ZWpzLm9yZy9zZXJ2ZXItcmVuZGVyZXIuZXNtLWJyb3dzZXIuanNcIlxuICB9XG59In0=

Steps to reproduce

image

All the contents are inside the _hoisted_1, while _hoisted_2 to _hoisted_18 is missing, then _hoisted_19 is there.

What is expected?

Should be something like this:

image

What is actually happening?

Causing a hydration mismatch error when SSR enabled:

image

System Info

not related

Any additional comments?

No response

avatar
Jun 6th 2022

static node stringify check has some rough heuristics - there must be a minimum number of consecutive static nodes for a piece of content to be stringified, so the behavior difference is expected.