From c463a71bb31f01da55927424533e2ece3a3c4efe Mon Sep 17 00:00:00 2001 From: underfin <2218301630@qq.com> Date: Fri, 12 Jun 2020 22:01:56 +0800 Subject: [PATCH] fix(ssr): fix unintended error on `Teleport` hydration mismatch (#1271) fix #1235 --- .../runtime-core/__tests__/hydration.spec.ts | 16 ++++++++++++++++ packages/runtime-core/src/components/Teleport.ts | 5 ++--- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts index 49daa3023f3..e54063fdb37 100644 --- 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('', () => + h(Teleport, { to: '#teleport' }, [h('span', 'value')]) + ) + expect(teleportContainer.innerHTML).toBe(`value`) + expect(`Hydration children mismatch`).toHaveBeenWarned() + }) }) }) diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index 8091f014408..9d8034684df 100644 --- 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)