Gissues: Async components in a TransitionGroup cause getBoundingClientRect is not a function

ElMassimo

Mar 15th 2023

Vue version

3.2.47

Link to minimal reproduction

SFC Playground Reproduction

Steps to reproduce

Add an async component (defineAsyncComponent) to a list rendered inside a TransitionGroup
Add a new item to the list before the previous async component has been resolved

What is expected?

Both components should be rendered once they are resolved.

What is actually happening?

If a new component is added to the TransitionGroup before a previously added async component is resolved and rendered, the app always crashes with:

TypeError: child.el.getBoundingClientRect is not a function

System Info

System:
    OS: macOS 12.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 604.33 MB / 16.00 GB
    Shell: 3.6.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.16.0 - ~/Library/Caches/fnm_multishells/24246_1678890358382/bin/node
    Yarn: 1.22.19 - ~/Library/pnpm/yarn
    npm: 9.1.1 - ~/Library/Caches/fnm_multishells/24246_1678890358382/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 109.0
    Safari: 15.2
  npmPackages:
    vue: ^3.2.47 => 3.2.47

Any additional comments?

Async components will initially render a comment element until they are resolved.

If a new component is added to the TransitionGroup before a previously added async component is resolved and rendered, the app always crashes with:

TypeError: child.el.getBoundingClientRect is not a function

The error occurs in TransitionGroup, as the assumption that child.el is an Element does not hold for async components (until they are resolved).

This happens in similar scenarios, like #5168 and #6745.