packages/runtime-core/src/renderer.ts (1)

2581-2602: Consider adding defensive safeguards for edge cases.

The recursive traversal logic correctly handles the wrapper component scenario described in issue #14173. However, consider adding safeguards:

1. Null check for subTree: Line 2590 accesses asyncWrapper.subTree without verification. If a component exists but subTree is undefined (e.g., during initialization or edge cases), this could cause issues.

2. Cycle detection or depth limit: While component trees should be acyclic, a depth limit or cycle detection would prevent potential infinite recursion if the component structure is unexpected.

Apply this diff to add defensive checks:

 function resolveAsyncComponentPlaceholder(anchorVnode: VNode) {
   // anchor vnode is a unresolved async component
   if (anchorVnode.placeholder) {
     return anchorVnode.placeholder
   }
 
   // anchor vnode maybe is a wrapper component has single unresolved async component
   const asyncWrapper = anchorVnode.component
   if (asyncWrapper) {
     const subTree = asyncWrapper.subTree
+    
+    // guard against missing subTree
+    if (!subTree) {
+      return null
+    }
 
     // wrapper that directly contains an unresolved async component
     if (subTree.placeholder) {
       return subTree.placeholder
     }
 
     // try to locate deeper nested async component placeholder
     return resolveAsyncComponentPlaceholder(subTree)
   }
 
   return null
 }

Alternatively, consider adding a depth parameter to prevent excessive recursion:

function resolveAsyncComponentPlaceholder(anchorVnode: VNode, depth: number = 0): HostNode | null {
  const MAX_DEPTH = 10 // reasonable limit for nested wrappers
  
  if (depth > MAX_DEPTH) {
    if (__DEV__) {
      warn('Maximum depth exceeded while resolving async component placeholder')
    }
    return null
  }
  
  if (anchorVnode.placeholder) {
    return anchorVnode.placeholder
  }
  
  const asyncWrapper = anchorVnode.component
  if (asyncWrapper?.subTree) {
    if (asyncWrapper.subTree.placeholder) {
      return asyncWrapper.subTree.placeholder
    }
    return resolveAsyncComponentPlaceholder(asyncWrapper.subTree, depth + 1)
  }
  
  return null
}

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro