fix(ssr): fix hydration for slot with empty text node

fix #5728
This commit is contained in:
Evan You 2022-05-19 12:35:29 +08:00
parent e1bc2681ef
commit 939209c6b5
2 changed files with 32 additions and 2 deletions

View File

@ -13,7 +13,8 @@ import {
createTextVNode,
createVNode,
withDirectives,
vModelCheckbox
vModelCheckbox,
renderSlot
} from '@vue/runtime-dom'
import { renderToString, SSRContext } from '@vue/server-renderer'
import { PatchFlags } from '../../shared/src'
@ -912,6 +913,24 @@ describe('SSR hydration', () => {
expect((container.firstChild!.firstChild as any)._value).toBe(true)
})
// #5728
test('empty text node in slot', () => {
const Comp = {
render(this: any) {
return renderSlot(this.$slots, 'default', {}, () => [
createTextVNode('')
])
}
}
const { container, vnode } = mountWithHydration('<!--[--><!--]-->', () => h(Comp))
expect(container.childNodes.length).toBe(3)
const text = container.childNodes[1]
expect(text.nodeType).toBe(3)
expect(vnode.el).toBe(container.childNodes[0])
// component => slot fragment => text node
expect((vnode as any).component?.subTree.children[0].el).toBe(text)
})
describe('mismatch handling', () => {
test('text node', () => {
const { container } = mountWithHydration(`foo`, () => 'bar')

View File

@ -110,7 +110,18 @@ export function createHydrationFunctions(
switch (type) {
case Text:
if (domType !== DOMNodeTypes.TEXT) {
nextNode = onMismatch()
// #5728 empty text node inside a slot can cause hydration failure
// because the server rendered HTML won't contain a text node
if (vnode.children === '') {
insert(
(vnode.el = document.createTextNode('')),
node.parentElement!,
node
)
nextNode = node
} else {
nextNode = onMismatch()
}
} else {
if ((node as Text).data !== vnode.children) {
hasMismatch = true