fix(hydration): handle enabled teleport hydration with null target (#14586)

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

@@ -3883,6 +3883,19 @@ describe('Vapor Mode hydration', () => {
       )
     })
 
+    test('enabled teleport with null target', async () => {
+      const { container } = await mountWithHydration(
+        '<!--teleport start--><!--teleport end-->',
+        `<teleport to="#non-existent-target-hydrate">
+          <div>content</div>
+        </teleport>`,
+      )
+      expect(container.innerHTML).toBe(
+        `<!--teleport start--><div>content</div><!--teleport end-->`,
+      )
+      expect('Failed to locate Teleport target').toHaveBeenWarned()
+    })
+
     test('should apply css vars after hydration', async () => {
       const state = reactive({ color: 'red' })
 

packages/runtime-vapor/src/components/Teleport.ts

@@ -368,6 +368,12 @@ export class TeleportFragment extends VaporFragment {
       }
     } else if (disabled) {
       this.hydrateDisabledTeleport(currentHydrationNode!)
+    } else {
+      // enabled teleport with null target: init children without
+      // hydration since there's no target to hydrate into.
+      this.mountAnchor = this.anchor = locateTeleportEndAnchor()!
+      this.mountContainer = this.anchor && this.anchor.parentNode
+      runWithoutHydration(this.initChildren.bind(this))
     }
 
     updateCssVars(this)