fix(runtime-dom): TransitionGroup does not handle async components that have not been resolved

packages/runtime-core/src/index.ts

@@ -59,7 +59,7 @@ export {
 export { provide, inject, hasInjectionContext } from './apiInject'
 export { nextTick } from './scheduler'
 export { defineComponent } from './apiDefineComponent'
-export { defineAsyncComponent } from './apiAsyncComponent'
+export { defineAsyncComponent, isAsyncWrapper } from './apiAsyncComponent'
 export { useAttrs, useSlots } from './apiSetupHelpers'
 
 // <script setup> API ----------------------------------------------------------

packages/runtime-dom/src/components/TransitionGroup.ts

@@ -27,6 +27,7 @@ import {
   warn,
 } from '@vue/runtime-core'
 import { extend } from '@vue/shared'
+import { isAsyncWrapper } from '@vue/runtime-core'
 
 const positionMap = new WeakMap<VNode, DOMRect>()
 const newPositionMap = new WeakMap<VNode, DOMRect>()
@@ -56,6 +57,15 @@ const TransitionGroupImpl: ComponentOptions = {
       if (!prevChildren.length) {
         return
       }
+
+      // #7898
+      if (
+        isAsyncWrapper(prevChildren[0]) &&
+        prevChildren[0].component &&
+        !prevChildren[0].component.asyncResolved
+      ) {
+        return
+      }
       const moveClass = props.moveClass || `${props.name || 'v'}-move`
 
       if (
@@ -134,7 +144,13 @@ const TransitionGroupImpl: ComponentOptions = {
             child,
             resolveTransitionHooks(child, cssTransitionProps, state, instance),
           )
-          positionMap.set(child, (child.el as Element).getBoundingClientRect())
+          // #7898
+          ;(child.el as Element).getBoundingClientRect
+            ? positionMap.set(
+                child,
+                (child.el as Element).getBoundingClientRect(),
+              )
+            : positionMap.set(child, new DOMRect())
         }
       }
 

packages/vue/__tests__/e2e/TransitionGroup.spec.ts

@@ -508,4 +508,62 @@ describe('e2e: TransitionGroup', () => {
 
     expect(`<TransitionGroup> children must be keyed`).toHaveBeenWarned()
   })
+
+  // #7898
+  // When `TransitionGroup` is updated,
+  // the async component does not have resolve and will not report an error
+  // It seems that this error cannot be caught in puppeteer,
+  // but we can still achieve single testing by checking whether the expected rendering is met
+  test(
+    'TransitionGroup is updated & the async component does not have resolve',
+    async () => {
+      await page().evaluate(() => {
+        const { createApp, defineAsyncComponent, shallowRef, onMounted } = (
+          window as any
+        ).Vue
+        createApp({
+          template: `
+              <div id="container">
+								<transition-group name="test">
+								 <component :is="component" 
+								 v-for="(component, index) in components" 
+								 :key="index" 
+								</transition-group>
+							</div>
+            `,
+          setup: () => {
+            const components = shallowRef([newComponent(1)])
+            function sleep(millis: number, index: number) {
+              return new Promise(resolve =>
+                setTimeout(() => {
+                  resolve({
+                    render() {
+                      return `foo${index}`
+                    },
+                  })
+                }, millis),
+              )
+            }
+
+            function newComponent(index: number) {
+              return defineAsyncComponent(() => sleep(1000, index))
+            }
+
+            function addComponent() {
+              components.value = [...components.value, newComponent(2)]
+            }
+            onMounted(() => {
+              addComponent()
+            })
+
+            return { components }
+          },
+        }).mount('#app')
+      })
+
+      await transitionFinish(1000)
+      expect(await html('#container')).toBe('foo1foo2')
+    },
+    E2E_TIMEOUT,
+  )
 })