diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index 19ccbc5de27..67092b43288 100644 --- a/packages/runtime-core/src/components/Teleport.ts +++ b/packages/runtime-core/src/components/Teleport.ts @@ -414,7 +414,7 @@ function updateCssVars(vnode: VNode) { const ctx = vnode.ctx if (ctx && ctx.ut) { let node = (vnode.children as VNode[])[0].el! - while (node !== vnode.targetAnchor) { + while (node && node !== vnode.targetAnchor) { if (node.nodeType === 1) node.setAttribute('data-v-owner', ctx.uid) node = node.nextSibling } diff --git a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts index 7d24ec0f434..5792a0107b1 100644 --- a/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts @@ -275,4 +275,22 @@ describe('useCssVars', () => { expect((c as HTMLElement).style.getPropertyValue(`--color`)).toBe('red') } }) + + test('with teleport(disabled)', async () => { + document.body.innerHTML = '' + const state = reactive({ color: 'red' }) + const root = document.createElement('div') + const target = document.body + + const App = { + setup() { + useCssVars(() => state) + return () => [h(Teleport, { to: target, disabled: true }, [h('div')])] + } + } + + expect(() => render(h(App), root)).not.toThrow(TypeError) + await nextTick() + expect(target.children.length).toBe(0) + }) })