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)
```
| @@ -14,136 +14,138 @@ | |||
| * the License. | |||
| */ | |||
| /// <reference lib="es2018" /> | |||
| import { nanoid } from 'nanoid'; | |||
| import type { ReactAdapterElement } from 'Frontend/generated/flow/ReactAdapter.js'; | |||
There was a problem hiding this comment.
Flow.tsx can't have a direct link to ReactAdapter.js as it is in another module that may not be available in the application.
|
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 |
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