fix(ssr): fix hydration mismatch warning about mutiple continuous tex…

[zhangzhonghe]

…t vnodes (#7285)

fix #7285

The following Comp will be rendered as a "<div>foo</div>" on the ssr side.

const Comp = defineComponent(() => h('div', ['fo', 'o']))

The "<div>foo</div>" will be rendered as a div element with a single child text node in the browser, but the above Comp will be rendered by Vue as a div element with two child vnodes, so will cause a mismatch warning during hydration.

[PraveenNanda124]

Looks good

[dwin0]

@zhangzhonghe Thanks for providing a fix for this problem. Do you know when it will be merged?

[Ives7]

when it merge?

[skirtles-code]

This fixes the problem for the initial hydration, but it throws an error if the text is subsequently updated:

• Example

I think most real use cases will need support for updates.

[icarusgk]

There's an error thrown by the mutation of the component's own state that spawns at renderer.ts line 1494 and it bubbles up until reaching the remove() function

Maybe that remove() function is trying to access the parentNode from the removed node here?

The error stack:

vue.runtime.esm-browser.js:9092 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
    at remove (vue.runtime.esm-browser.js:9092:26)
    at performRemove (vue.runtime.esm-browser.js:7636:7)
    at remove (vue.runtime.esm-browser.js:7650:7)
    at unmount (vue.runtime.esm-browser.js:7605:9)
    at patchKeyedChildren (vue.runtime.esm-browser.js:7402:9)
    at patchChildren (vue.runtime.esm-browser.js:7258:11)
    at patchElement (vue.runtime.esm-browser.js:6722:7)
    at processElement (vue.runtime.esm-browser.js:6557:7)
    at patch (vue.runtime.esm-browser.js:6418:11)
    at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-browser.js:7152:9)