Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async components in a TransitionGroup cause getBoundingClientRect is not a function #7898

Closed
ElMassimo opened this issue Mar 15, 2023 · 4 comments · Fixed by #9421
Closed
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has PR A pull request has already been submitted to solve the issue scope: transition

Comments

@ElMassimo
Copy link

ElMassimo commented Mar 15, 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.

@ychongsaytc
Copy link

same problem here.

@haoqunjiang haoqunjiang added scope: transition has PR A pull request has already been submitted to solve the issue 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Aug 29, 2023
@RomanSkrypnik
Copy link

Facing the same problem

@GuiltyEND
Copy link

the same problem

@edison1105
Copy link
Member

duplicate of #5168

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has PR A pull request has already been submitted to solve the issue scope: transition
Projects
None yet
6 participants