File tree Expand file tree Collapse file tree 2 files changed +32
-2
lines changed Expand file tree Collapse file tree 2 files changed +32
-2
lines changed Original file line number Diff line number Diff line change @@ -13,7 +13,8 @@ import {
13
13
createTextVNode ,
14
14
createVNode ,
15
15
withDirectives ,
16
- vModelCheckbox
16
+ vModelCheckbox ,
17
+ renderSlot
17
18
} from '@vue/runtime-dom'
18
19
import { renderToString , SSRContext } from '@vue/server-renderer'
19
20
import { PatchFlags } from '../../shared/src'
@@ -912,6 +913,24 @@ describe('SSR hydration', () => {
912
913
expect ( ( container . firstChild ! . firstChild as any ) . _value ) . toBe ( true )
913
914
} )
914
915
916
+ // #5728
917
+ test ( 'empty text node in slot' , ( ) => {
918
+ const Comp = {
919
+ render ( this : any ) {
920
+ return renderSlot ( this . $slots , 'default' , { } , ( ) => [
921
+ createTextVNode ( '' )
922
+ ] )
923
+ }
924
+ }
925
+ const { container, vnode } = mountWithHydration ( '<!--[--><!--]-->' , ( ) => h ( Comp ) )
926
+ expect ( container . childNodes . length ) . toBe ( 3 )
927
+ const text = container . childNodes [ 1 ]
928
+ expect ( text . nodeType ) . toBe ( 3 )
929
+ expect ( vnode . el ) . toBe ( container . childNodes [ 0 ] )
930
+ // component => slot fragment => text node
931
+ expect ( ( vnode as any ) . component ?. subTree . children [ 0 ] . el ) . toBe ( text )
932
+ } )
933
+
915
934
describe ( 'mismatch handling' , ( ) => {
916
935
test ( 'text node' , ( ) => {
917
936
const { container } = mountWithHydration ( `foo` , ( ) => 'bar' )
Original file line number Diff line number Diff line change @@ -110,7 +110,18 @@ export function createHydrationFunctions(
110
110
switch ( type ) {
111
111
case Text :
112
112
if ( domType !== DOMNodeTypes . TEXT ) {
113
- nextNode = onMismatch ( )
113
+ // #5728 empty text node inside a slot can cause hydration failure
114
+ // because the server rendered HTML won't contain a text node
115
+ if ( vnode . children === '' ) {
116
+ insert (
117
+ ( vnode . el = document . createTextNode ( '' ) ) ,
118
+ node . parentElement ! ,
119
+ node
120
+ )
121
+ nextNode = node
122
+ } else {
123
+ nextNode = onMismatch ( )
124
+ }
114
125
} else {
115
126
if ( ( node as Text ) . data !== vnode . children ) {
116
127
hasMismatch = true
You can’t perform that action at this time.
0 commit comments