fix(flow-react): avoid Flow-React portal outlet removal conflicts #20770
Conversation
Some routing cases in hybrid Flow layout + React view applications could produce DOM tree conflicts from Flow server-side changes and React client-side portal removal happening simultaneously. This could throw DOM `NotFoundError` in the browser. This change introduces a dedicated DOM element for React portal outlet, which allows to avoid the error. Fixes vaadin/hilla#3002
platosha
force-pushed
the
fix/hilla-3002
branch
from
5de9f48 to
69b3861
Compare
There was a problem hiding this comment.
Still doesn't happen when manually running, but if I have the server open and run the hillaViewInFlowLayout test from vaadin-platform-react-hybrid-test it always fails with
Unexpected Application Error!
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChildFromContainer (http://localhost:8080/VAADIN/@fs/C:/Users/.../platform/vaadin-platform-react-hybrid-test/node_modules/.vite/deps/chunk-UJKGNB4G.js?v=3c974d7f:8509:23)
```
flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Could we do a PR with only formatting and then rebase this on it so that the changes would be clearer to see.
Also what is the formatter used as I get different results than those here. I don't think flow has any defined javascript format and uses the idea default instead.
|
For me locally the tests still fail in the hybrid module when executed |
I think prettier is used, we have some rules for that in Flow |
|
when this PR got merged... please let us know that.. because we need to remove the @ignore from platform tests |
# Conflicts: # flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx
|
|
Now I'm getting the exception even just clicking around. Most often repeated by going to |
|
Hi @platosha and @caalador, when i performed cherry-pick to this commit to 24.6, i have encountered the following issue. Can you take a look and pick it manually? |
…0770) Some routing cases in hybrid Flow layout + React view applications could produce DOM tree conflicts from Flow server-side changes and React client-side portal removal happening simultaneously. This could throw DOM `NotFoundError` in the browser. This change introduces a dedicated DOM element for React portal outlet, which allows to avoid the error. Fixes vaadin/hilla#3002 --------- Co-authored-by: Vlad Rindevich <vladrin@vaadin.com> (cherry picked from commit 66443d4)
…0770) (#20862) Some routing cases in hybrid Flow layout + React view applications could produce DOM tree conflicts from Flow server-side changes and React client-side portal removal happening simultaneously. This could throw DOM `NotFoundError` in the browser. This change introduces a dedicated DOM element for React portal outlet, which allows to avoid the error. Fixes vaadin/hilla#3002 --------- Co-authored-by: Vlad Rindevich <vladrin@vaadin.com> (cherry picked from commit 66443d4) Co-authored-by: Anton Platonov <anton@vaadin.com>
Some routing cases in hybrid Flow layout + React view applications could produce DOM tree conflicts from Flow server-side changes and React client-side portal removal happening simultaneously. This could throw DOM
NotFoundErrorin the browser. This change introduces a dedicated DOM element for React portal outlet, which allows to avoid the error.Fixes vaadin/hilla#3002