fix: skip blank text nodes during hydration

Author: edison1105

packages/runtime-core/src/hydration.ts

@@ -659,6 +659,17 @@ export function createHydrationFunctions(
         )
       }
     }
+
+    // the server output does not contain blank text nodes. It appears here that
+    // it is a dynamically inserted anchor, and needs to be skipped.
+    // e.g. vaporInteropImpl.mount() > selfAnchor
+    if (
+      node &&
+      node.nodeType === DOMNodeTypes.TEXT &&
+      !(node as Text).data.trim()
+    ) {
+      node = nextSibling(node)
+    }
     return node
   }
 

packages/runtime-vapor/src/vdomInterop.ts

@@ -62,9 +62,7 @@ const vaporInteropImpl: Omit<
 > = {
   mount(vnode, container, anchor, parentComponent) {
     let selfAnchor = (vnode.el = vnode.anchor = createTextNode())
-    if (!isHydrating) {
-      container.insertBefore(selfAnchor, anchor)
-    }
+    container.insertBefore(selfAnchor, anchor)
     const prev = currentInstance
     simpleSetCurrentInstance(parentComponent)
 
@@ -90,12 +88,6 @@ const vaporInteropImpl: Omit<
     ))
     instance.rawPropsRef = propsRef
     instance.rawSlotsRef = slotsRef
-    if (isHydrating) {
-      // insert self anchor after hydration completed to avoid mismatching
-      ;(instance.m || (instance.m = [])).push(() => {
-        container.insertBefore(selfAnchor, anchor)
-      })
-    }
     mountComponent(instance, container, selfAnchor)
     simpleSetCurrentInstance(prev)
     return instance