fix(ssr): fix hydration for node with empty text node (vuejs#7216)

Author: edison1105

packages/runtime-core/__tests__/hydration.spec.ts

@@ -1160,6 +1160,21 @@ describe('SSR hydration', () => {
     expect((vnode as any).component?.subTree.children[0].el).toBe(text)
   })
 
+  // #7215
+  test('empty text node', () => {
+    const Comp = {
+      render(this: any) {
+        return h('p', [''])
+      }
+    }
+    const { container } = mountWithHydration('<p></p>', () => h(Comp))
+    expect(container.childNodes.length).toBe(1)
+    const p = container.childNodes[0]
+    expect(p.childNodes.length).toBe(1)
+    const text = p.childNodes[0]
+    expect(text.nodeType).toBe(3)
+  })
+
   test('app.unmount()', async () => {
     const container = document.createElement('DIV')
     container.innerHTML = '<button></button>'

packages/runtime-core/src/hydration.ts

@@ -541,7 +541,9 @@ export function createHydrationFunctions(
           optimized,
         )
       } else if (vnode.type === Text && !vnode.children) {
-        continue
+        // #7215 create a TextNode for empty text node
+        // because server rendered HTML won't contain a text node
+        insert((vnode.el = createText('')), container)
       } else {
         hasMismatch = true
         if (