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.

Sign up for GitHub

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

Jump to bottom

Navigating between Views cause application Error #3002

Closed
Tracked by #7057
ZheSun88 opened this issue Dec 13, 2024 · 1 comment · Fixed by vaadin/flow#20770
Closed
Tracked by #7057

Navigating between Views cause application Error #3002

ZheSun88 opened this issue Dec 13, 2024 · 1 comment · Fixed by vaadin/flow#20770
Assignees
@Lodin
Labels
bug Something isn't working hilla Issues related to Hilla Impact: Low Severity: Major

Comments

@ZheSun88
Copy link
Contributor

Describe the bug

navigate between the flowView and flow-hilla-deep-tree cause the application failed with this error

image

Expected-behavior

app works

Reproduction

take platform project

  • ./scripts/generateBoms.sh --useSnapshots
  • mvn install -DskipTests -Preact-hybrid
  • cd vaadin-platform-react-hybrid-test
  • mvn spring-boot:run

System Info

it seems this issue can be reproduced easily on linux and windows instead of Mac
vaadin 24.6 and 24.7
@ZheSun88 ZheSun88 added bug Something isn't working hilla Issues related to Hilla labels Dec 13, 2024
@ZheSun88 ZheSun88 mentioned this issue Dec 16, 2024
Open
11 tasks
@Lodin
Copy link
Contributor

Lodin commented Dec 17, 2024

So, I found that it is not a timing issue. For me, it almost always happen if I do the following steps:

  1. Open Chrome and open DevTools. Enable Pause on unhandled exceptions checkbox.
  2. Open vaadin-platform-react-hybrid-test application on https://localhost:8080.
  3. Click Flow button
  4. Open side menu and click (or just click if opened) Non root React in Flow button
  5. You'll see the error caught.

In this scenario the speed in unrelated.

platosha added a commit to vaadin/flow that referenced this issue Dec 20, 2024
@platosha
fix(flow-react): avoid Flow-React portal outlet removal conflicts
5de9f48 
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 platosha mentioned this issue Dec 20, 2024
Merged
platosha added a commit to vaadin/flow that referenced this issue Dec 20, 2024
@platosha
fix(flow-react): avoid Flow-React portal outlet removal conflicts
69b3861 
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
caalador pushed a commit to vaadin/flow that referenced this issue Jan 16, 2025
@platosha @Lodin
fix(flow-react): avoid Flow-React portal outlet removal conflicts (#2…
66443d4 
…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>
Lodin pushed a commit to vaadin/flow that referenced this issue Jan 16, 2025
@platosha @Lodin
fix(flow-react): avoid Flow-React portal outlet removal conflicts (#2…
ce9b032 
…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)
caalador pushed a commit to vaadin/flow that referenced this issue Jan 16, 2025
@Lodin @platosha
fix(flow-react): avoid Flow-React portal outlet removal conflicts (#2…
4cdf24a 
…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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Lodin Lodin

Labels
bug Something isn't working hilla Issues related to Hilla Impact: Low Severity: Major
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(flow-react): avoid Flow-React portal outlet removal conflicts vaadin/flow
3 participants
@platosha @Lodin @ZheSun88