fix(ssr): Using teleport disabled causes mismatch

Author: pikax

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

@@ -1083,5 +1083,29 @@ describe('SSR hydration', () => {
       expect(teleportContainer.innerHTML).toBe(`<span>value</span>`)
       expect(`Hydration children mismatch`).toHaveBeenWarned()
     })
+    // #6152
+    test('Teleport is disabled', () => {
+      const { container } = mountWithHydration(
+        '<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->',
+        () => [
+          h('div', 'Parent fragment'),
+          h(
+            defineComponent(
+              () => () =>
+                h(Teleport, { to: 'body', disabled: true }, [
+                  h('div', 'Teleport content')
+                ])
+            )
+          )
+        ]
+      )
+      expect(document.body.innerHTML).toBe('')
+      expect(container.innerHTML).toBe(
+        '<!--[--><div>Parent fragment</div><!--teleport start--><div>Teleport content</div><!--teleport end--><!--]-->'
+      )
+      expect(
+        `Hydration completed but contains mismatches.`
+      ).not.toHaveBeenWarned()
+    })
   })
 })

packages/runtime-core/src/hydration.ts

@@ -232,17 +232,11 @@ export function createHydrationFunctions(
           // instead, we do a lookahead to find the end anchor node.
           nextNode = isFragmentStart
             ? locateClosingAsyncAnchor(node)
+            : // #4293 #6152 if teleport start look ahead for teleport end.
+            isComment(node) && node.data === 'teleport start'
+            ? locateClosingTeleportAnchor(node)
             : nextSibling(node)
 
-          // #4293 teleport as component root
-          if (
-            nextNode &&
-            isComment(nextNode) &&
-            nextNode.data === 'teleport end'
-          ) {
-            nextNode = nextSibling(nextNode)
-          }
-
           // #3787
           // if component is async, it may get moved / unmounted before its
           // inner component is loaded, so we need to give it a placeholder
@@ -579,5 +573,23 @@ export function createHydrationFunctions(
     return node
   }
 
+  const locateClosingTeleportAnchor = (node: Node | null): Node | null => {
+    let match = 0
+    while (node) {
+      node = nextSibling(node)
+      if (node && isComment(node)) {
+        if (node.data === 'teleport start') match++
+        if (node.data === 'teleport end') {
+          if (match === 0) {
+            return nextSibling(node)
+          } else {
+            match--
+          }
+        }
+      }
+    }
+    return node
+  }
+
   return [hydrate, hydrateNode] as const
 }