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

template compilation wrong identification of whitespaces let transition-group fail with exception "Cannot read properties of null (reading 'getBoundingClientRect')" #5153

Closed
terenzif opened this issue Dec 22, 2021 · 3 comments · Fixed by #9421
Labels
has workaround A workaround has been found to avoid the problem scope: compiler

Comments

@terenzif
Copy link

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.

@posva posva added the has workaround A workaround has been found to avoid the problem label Dec 26, 2021
@posva
Copy link
Member

posva commented Dec 26, 2021

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

@renatodeleao
Copy link

renatodeleao commented Jan 13, 2023

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 👋

@edison1105
Copy link
Member

edison1105 commented Oct 25, 2023

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

@github-actions github-actions bot locked and limited conversation to collaborators Apr 30, 2024
lynxlangya pushed a commit to lynxlangya/core that referenced this issue May 30, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has workaround A workaround has been found to avoid the problem scope: compiler
Projects
None yet
5 participants