fix(runtime-core): fix error when using cssvars with disabled teleport (

vuejs#7341) close vuejs#7342
lumozx · Oct 21, 2023 · feabcfa · feabcfa
1 parent e3ef24f
commit feabcfa
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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)
+  })
 })