fix(hydration): avoid observing non-Element node (#11954)

close #11952
vuejs · Sep 20, 2024 · 7257e6a · 7257e6a
1 parent e075dfa
commit 7257e6a
Show file tree

Hide file tree

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