fix(ssr): fix unintended error on Teleport hydration mismatch (#1271)

fix #1235
vuejs · Jun 12, 2020 · c463a71 · c463a71
1 parent d863ce7
commit c463a71
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -37,6 +37,10 @@ const triggerEvent = (type: string, el: Element) => {
 describe('SSR hydration', () => {
  mockWarn()
 
+ beforeEach(() => {
+ document.body.innerHTML = ''
+ })
+
  test('text', async () => {
  const msg = ref('foo')
  const { vnode, container } = mountWithHydration('foo', () => msg.value)
@@ -686,5 +690,17 @@ describe('SSR hydration', () => {
  // excessive children removal
  expect(`Hydration children mismatch`).toHaveBeenWarned()
  })
+
+ test('Teleport target has empty children', () => {
+ const teleportContainer = document.createElement('div')
+ teleportContainer.id = 'teleport'
+ document.body.appendChild(teleportContainer)
+
+ mountWithHydration('<!--teleport start--><!--teleport end-->', () =>
+ h(Teleport, { to: '#teleport' }, [h('span', 'value')])
+ )
+ expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
+ expect(`Hydration children mismatch`).toHaveBeenWarned()
+ })
  })
 })
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
@@ -314,9 +314,8 @@ function hydrateTeleport(
  optimized
  )
  }
- ;(target as TeleportTargetElement)._lpa = nextSibling(
- vnode.targetAnchor as Node
- )
+ ;(target as TeleportTargetElement)._lpa =
+ vnode.targetAnchor && nextSibling(vnode.targetAnchor as Node)
  }
  }
  return vnode.anchor && nextSibling(vnode.anchor as Node)