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

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

@@ -959,6 +959,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

@@ -445,7 +445,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 (__DEV__ && !hasWarned) {