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

Circular imports in routes.tsx + Flow.tsx #19658

Closed
Artur- opened this issue Jul 3, 2024 · 2 comments · Fixed by #19666
Closed

Circular imports in routes.tsx + Flow.tsx #19658

Artur- opened this issue Jul 3, 2024 · 2 comments · Fixed by #19666
Labels
prerelease version for Vaadin 24.5.0 Released with Vaadin 24.4.5 Released with Vaadin 24.5.0.alpha4

Comments

@Artur-
Copy link
Member

Artur- commented Jul 3, 2024

Description of the bug

When you start an app using Hilla FS routes and then do

touch src/main/frontend/generated/file-routes.ts

Two things can happen in the browser:

Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

This is covered by #19657

  1. An additional
(index):5 ReferenceError: Cannot access 'Flow' before initialization
    at routes.tsx:61:19

This is related to the Vite logs

[hmr] /generated/flow/Flow.tsx failed to apply HMR as it's within a circular import. Reloading page to reset the execution order. To debug and break the circular import, you can run `vite --debug hmr` to log the circular dependency path if a file change triggered it.

and with --debug hmr

2024-07-03T13:24:08.956+03:00  INFO 70104 --- [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 2024-07-03T10:24:08.956Z vite:hmr circular imports detected: /generated/routes.tsx -> /generated/flow/Flow.tsx -> /generated/routes.tsx

Expected behavior

No circular import errors

Minimal reproducible example

npm init vaadin test-hmr

Hilla example views
cd test-hmr
mvn
touch src/main/frontend/generated/file-routes.ts

Versions

  • Vaadin / Flow version: 24.4.4
Artur- added a commit that referenced this issue Jul 3, 2024
@Artur-
fix: Pass routes through context instead of import
e0cf5d4 
Fixes #19658
@Artur- Artur- mentioned this issue Jul 3, 2024
Closed
Artur- added a commit that referenced this issue Jul 3, 2024
@Artur-
fix: Pass routes through context instead of import
5cb142b 
Fixes #19658
Artur- added a commit that referenced this issue Jul 3, 2024
@Artur-
fix: Pass route data through window.Vaadin.routesConfig instead of an…
acc4061 
… import

Fixes #19658
@Artur- Artur- mentioned this issue Jul 3, 2024
Merged
Artur- added a commit that referenced this issue Jul 3, 2024
@Artur-
fix: Pass route data through window.Vaadin.routesConfig instead of an…
4a11fa2 
… import

Fixes #19658
mshabarov pushed a commit that referenced this issue Jul 4, 2024
@Artur-
fix: Pass route data through window.Vaadin.routesConfig instead of an…
9b88c4c 
… import (#19666)

Instead of importing routes.js/routes.ts/routes.tsx from the project into Flow.tsx and creating a circular dependency, this moves importing of routes.js to a new file that is always included when react is used vaadin-react.tsx. This file publishes the routes as window.Vaadin.routesConfig so that Flow.tsx can read them from there without directly depending on routes.js

Fixes #19658
vaadin-bot pushed a commit that referenced this issue Jul 4, 2024
@Artur- @vaadin-bot
fix: Pass route data through window.Vaadin.routesConfig instead of an…
649d024 
… import (#19666)

Instead of importing routes.js/routes.ts/routes.tsx from the project into Flow.tsx and creating a circular dependency, this moves importing of routes.js to a new file that is always included when react is used vaadin-react.tsx. This file publishes the routes as window.Vaadin.routesConfig so that Flow.tsx can read them from there without directly depending on routes.js

Fixes #19658
vaadin-bot added a commit that referenced this issue Jul 4, 2024
@vaadin-bot @Artur-
fix: Pass route data through window.Vaadin.routesConfig instead of an…
680dc19 
… import (#19666) (#19670)

Instead of importing routes.js/routes.ts/routes.tsx from the project into Flow.tsx and creating a circular dependency, this moves importing of routes.js to a new file that is always included when react is used vaadin-react.tsx. This file publishes the routes as window.Vaadin.routesConfig so that Flow.tsx can read them from there without directly depending on routes.js

Fixes #19658

Co-authored-by: Artur <[email protected]>
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.5.0.alpha4 and is also targeting the upcoming stable 24.5.0 version.

@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 24.4.5.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
prerelease version for Vaadin 24.5.0 Released with Vaadin 24.4.5 Released with Vaadin 24.5.0.alpha4
Projects
None yet
Milestone
No milestone
2 participants
@Artur- @vaadin-bot