From 7257e6a34200409b3fc347d3bb807e11e2785974 Mon Sep 17 00:00:00 2001
From: linzhe <40790268+linzhe141@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:41:58 +0800
Subject: [PATCH] fix(hydration): avoid observing non-Element node (#11954)

close #11952
---
 packages/runtime-core/src/hydrationStrategies.ts      |  1 +
 .../vue/__tests__/e2e/hydration-strat-visible.html    |  8 +++++++-
 .../vue/__tests__/e2e/hydrationStrategies.spec.ts     | 11 +++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/hydrationStrategies.ts b/packages/runtime-core/src/hydrationStrategies.ts
index 791ca9e525..bb98ea93c2 100644
--- a/packages/runtime-core/src/hydrationStrategies.ts
+++ b/packages/runtime-core/src/hydrationStrategies.ts
@@ -48,6 +48,7 @@ export const hydrateOnVisible: HydrationStrategyFactory<
     }
   }, opts)
   forEach(el => {
+    if (!(el instanceof Element)) return
     if (elementIsVisibleInViewport(el)) {
       hydrate()
       ob.disconnect()
diff --git a/packages/vue/__tests__/e2e/hydration-strat-visible.html b/packages/vue/__tests__/e2e/hydration-strat-visible.html
index 7b3b5ddf35..489222f860 100644
--- a/packages/vue/__tests__/e2e/hydration-strat-visible.html
+++ b/packages/vue/__tests__/e2e/hydration-strat-visible.html
@@ -11,9 +11,12 @@
 <script>
   const rootMargin = location.search.match(/rootMargin=(\d+)/)?.[1] ?? 0
   const isFragment = location.search.includes('?fragment')
+  const isVIf = location.search.includes('?v-if')
   if (isFragment) {
     document.getElementById('app').innerHTML =
       `<!--[--><!--[--><span>one</span><!--]--><button>0</button><span>two</span><!--]-->`
+  } else if (isVIf) {
+    document.getElementById('app').innerHTML = `<!---->`
   }
 
   window.isHydrated = false
@@ -24,6 +27,7 @@
     ref,
     onMounted,
     hydrateOnVisible,
+    createCommentVNode,
   } = Vue
 
   const Comp = {
@@ -39,7 +43,9 @@
           { onClick: () => count.value++ },
           count.value,
         )
-        if (isFragment) {
+        if (isVIf) {
+          return createCommentVNode('v-if', true)
+        } else if (isFragment) {
           return [[h('span', 'one')], button, h('span', 'two')]
         } else {
           return button
diff --git a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts
index 58e3784ba7..69934d9591 100644
--- a/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts
+++ b/packages/vue/__tests__/e2e/hydrationStrategies.spec.ts
@@ -65,6 +65,17 @@ describe('async component hydration strategies', () => {
     await assertHydrationSuccess()
   })
 
+  test('visible (root v-if) should not throw error', async () => {
+    const spy = vi.fn()
+    const currentPage = page()
+    currentPage.on('pageerror', spy)
+    await goToCase('visible', '?v-if')
+    await page().waitForFunction(() => window.isRootMounted)
+    expect(await page().evaluate(() => window.isHydrated)).toBe(false)
+    expect(spy).toBeCalledTimes(0)
+    currentPage.off('pageerror', spy)
+  })
+
   test('media query', async () => {
     await goToCase('media')
     await page().waitForFunction(() => window.isRootMounted)
-- 
2.47.3