Version

3.2.20

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Open the link and click the "Toggle transition" button.

What is expected?

Expected normal transition behavior.

What is actually happening?

Transition-group throws an error:

TypeError: child.el.getBoundingClientRect is not a function

I've added the <!--This comment breaks it--> HTML comment in CustomComponent.vue. Remove it and the transition will work.

I assume Vue reads the HTML comment as the second template's root element.

Had problem with this for hours because I left one HTML tag commented out in my component. Figured it out by sheer luck. >_>

A component in <Transition> should have a root tag so that it can be animated. If you change the comment to <div>Hello World</div>, you will see the correct warning message. So maybe we have two works :

1. Fix the error catch when component inside don't have a root node and have a comment
2. We do allow users to implement multiple root nodes component in Vue3, but it seems doesn't work when we wrap it with a <Transition> tag 🤔

Please print a warning if the template has html comment in it. I spent 6 hours figuring out this problem. Or remove automatically all html comments from translation templates.

I got these errors: https://github.com/vuejs/core/issues/4621.