throw TypeError when unmounting Teleport after hydration

[AyatoEbata]

Vue version

3.4.32

Link to minimal reproduction

https://stackblitz.com/edit/github-5tkgxx?terminal=dev
https://stackblitz.com/edit/github-wszpet

Steps to reproduce

1. direct access to index
2. click to page1
3. throw error when redirecting

What is expected?

No error when redirecting

What is actually happening?

throw type error and unable to redirect

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.4.32 => 3.4.32

Any additional comments?

No response

[edison1105]

Could you please provide a minimal reproduction without VueFinalModal or file an issue to VueFinalModal first.

[AyatoEbata]

@edison1105
https://stackblitz.com/edit/github-wszpet
This is a minimal reproduction without VueFinalModal.
This may be a bug regarding Teleport.

[dadajam4]

The same issue is occurring with my product as well. After switching through different Vue versions, I confirmed that it does not occur in version 3.4.31 but does occur in version 3.4.32.

[madskronborg]

The same issue is occurring with my product as well. After switching through different Vue versions, I confirmed that it does not occur in version 3.4.31 but does occur in version 3.4.32.

We experience the same in our Nuxt application. Navigation between pages without a layout and a page with a layout breaks in vue 3.4.32 and 3.4.33 but works as expected in 3.4.31.

Instead of page content getting replaced when navigating, the app changes the browser URL but the content of the old page remains while console contains the error mentioned in this issue.

[obulat]

The new targetStart property of the teleport vnode is not populated when hydrating an SSR-rendered teleport. So,
n1 here is not null, but does not have targetStart:

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

Lines 73 to 74 in 422ef34

	process(
	n1: TeleportVNode | null,

So, the error in this issue is thrown when the remove function is called on this node here:

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

Lines 274 to 277 in 422ef34

	if (target) {
	hostRemove(targetStart!)
	hostRemove(targetAnchor!)
	}

This breaks the navigation from server-rendered pages with a teleport.

[urbgimtam]

Adding a condition to Teleport tag mitigates the issue, like <Teleport v-if="true">.

[ZTL-UwU]

Is it okay to just add a null check in the remove function?

if (target) {
-  hostRemove(targetStart!) 
-  hostRemove(targetAnchor!)
+  if (targetStart) hostRemove(targetStart)
+  if (targetAnchor) hostRemove(targetAnchor)
}