Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Create a transition-group with nested elements Condense template removing \r \n keeping only spaces between tags

What is expected?

This should work without warnings

What is actually happening?

It gets the error: Cannot read properties of null (reading 'getBoundingClientRect')

The cause of the reported error come from this section of parseChildren function:

                      if (!prev ||
                          !next ||
                          (shouldCondense &&
                              (prev.type === 3 /* COMMENT */ ||
                                  next.type === 3 /* COMMENT */ ||
                                  (prev.type === 1 /* ELEMENT */ &&
                                      next.type === 1 /* ELEMENT */ &&
                                      /[\r\n]/.test(node.content))))) {
                          removedWhitespace = true;
                          nodes[i] = null;
                      }
                      else {
                          // Otherwise, the whitespace is condensed into a single space
                          node.content = ' ';
                      }

The problem is, if section has only spaces without \r or \n, it doesn't get removed but replaced with a space. This make render a text section inside a transition-group between animated elements, which cannot be animated.

As a workaround, using new lines (which is the automatic behavior of formatters), works as expected

I'm getting the issue on a very complex table component.

As for the workarounds, my components have an indented/formatted structure and only removing all whitespace between components makes it work, which is a no-go because the component becomes impossible to read/maintain by humans.

What is causing the issue on my end is that I have Vue compiler configured with vue@2 behaviour — whitespace: "preserve" — because this is a very large app and using the new vue@3 default would create a lot of little copywriting whitespace issues. Open to new workarounds for this scenario, otherwise, i have to bite the bullet and fix every little whitespace issue on the app. Anyways, the chosen compiler whitespace strategy should not affect the way native vue components work IMO.

Cheers 👋

This problem still exists if preserve whitespace characters. I think we need to fix it at runtime. Do not apply Transition to text nodes. see #9421