fix(hydration): log hydration error even when using async components

Author: RodrigoProjects

packages/runtime-core/src/hydration.ts

@@ -36,7 +36,19 @@ const enum DOMNodeTypes {
   COMMENT = 8
 }
 
-let hasMismatch = false
+// This log function is built this way to guarantee it's only triggered once.
+const logMismatchError = (function () {
+  let alreadyLogged = false
+
+  return () => {
+    if(alreadyLogged) {
+      return
+    }
+
+    console.error('Hydration completed but contains mismatches.')
+    alreadyLogged = true
+  }
+})()
 
 const isSVGContainer = (container: Element) =>
   /svg/.test(container.namespaceURI!) && container.tagName !== 'foreignObject'
@@ -78,14 +90,10 @@ export function createHydrationFunctions(
       container._vnode = vnode
       return
     }
-    hasMismatch = false
+
     hydrateNode(container.firstChild!, vnode, null, null, null)
     flushPostFlushCbs()
     container._vnode = vnode
-    if (hasMismatch && !__TEST__) {
-      // this error should show up in production
-      console.error(`Hydration completed but contains mismatches.`)
-    }
   }
 
   const hydrateNode = (
@@ -130,7 +138,6 @@ export function createHydrationFunctions(
           }
         } else {
           if ((node as Text).data !== vnode.children) {
-            hasMismatch = true
             __DEV__ &&
               warn(
                 `Hydration text mismatch:` +
@@ -139,6 +146,9 @@ export function createHydrationFunctions(
                   )}` +
                   `\n- Client rendered: ${JSON.stringify(vnode.children)}`
               )
+
+            !__TEST__ && logMismatchError()
+
             ;(node as Text).data = vnode.children as string
           }
           nextNode = nextSibling(node)
@@ -387,22 +397,23 @@ export function createHydrationFunctions(
         )
         let hasWarned = false
         while (next) {
-          hasMismatch = true
           if (__DEV__ && !hasWarned) {
             warn(
               `Hydration children mismatch in <${vnode.type as string}>: ` +
                 `server rendered element contains more child nodes than client vdom.`
             )
             hasWarned = true
           }
+
+          !__TEST__ && logMismatchError()
+
           // The SSRed DOM contains more nodes than it should. Remove them.
           const cur = next
           next = next.nextSibling
           remove(cur)
         }
       } else if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
         if (el.textContent !== vnode.children) {
-          hasMismatch = true
           __DEV__ &&
             warn(
               `Hydration text content mismatch in <${
@@ -411,6 +422,9 @@ export function createHydrationFunctions(
                 `- Server rendered: ${el.textContent}\n` +
                 `- Client rendered: ${vnode.children as string}`
             )
+
+          !__TEST__ && logMismatchError()
+
           el.textContent = vnode.children as string
         }
       }
@@ -447,14 +461,16 @@ export function createHydrationFunctions(
       } else if (vnode.type === Text && !vnode.children) {
         continue
       } else {
-        hasMismatch = true
         if (__DEV__ && !hasWarned) {
           warn(
             `Hydration children mismatch in <${container.tagName.toLowerCase()}>: ` +
               `server rendered element contains fewer child nodes than client vdom.`
           )
           hasWarned = true
         }
+
+        !__TEST__ && logMismatchError()
+
         // the SSRed DOM didn't contain enough nodes. Mount the missing ones.
         patch(
           null,
@@ -501,7 +517,8 @@ export function createHydrationFunctions(
     } else {
       // fragment didn't hydrate successfully, since we didn't get a end anchor
       // back. This should have led to node/children mismatch warnings.
-      hasMismatch = true
+      !__TEST__ && logMismatchError()
+
       // since the anchor is missing, we need to create one and insert it
       insert((vnode.anchor = createComment(`]`)), container, next)
       return next
@@ -516,7 +533,6 @@ export function createHydrationFunctions(
     slotScopeIds: string[] | null,
     isFragment: boolean
   ): Node | null => {
-    hasMismatch = true
     __DEV__ &&
       warn(
         `Hydration node mismatch:\n- Client vnode:`,
@@ -529,6 +545,9 @@ export function createHydrationFunctions(
           ? `(start of fragment)`
           : ``
       )
+
+    !__TEST__ && logMismatchError()
+
     vnode.el = null
 
     if (isFragment) {