In a hybrid application, Flow fails after doing HMR and reloading Flow.tsx

[Artur-]

Description of the bug

If you have a React main layout and show a Flow view inside that, then performing a change to the main layout in some cases causes

Uncaught (in promise) Error: Application ROOT-2521314 already initialized
    at window.Vaadin.Flow.initApplication (FlowBootstrap.js:93:17)
    at Module.init (FlowBootstrap.js:259:22)
    at Flow.flowInit (Flow.ts:320:20)
    at async Object.action (Flow.ts:194:11)
window.Vaadin.Flow.initApplication @ FlowBootstrap.js:93
init @ FlowBootstrap.js:259
flowInit @ Flow.ts:320
Promise.then (async)
(anonymous) @ Flow.tsx:279
commitHookEffectListMount @ react-dom.development.js:23150

It happens because a new instance of Flow is created when the MainLayout is hot deployed. This in turn causes the isFlowClientLoaded() check to return false (it checks state from the Flow instance) but the real initialization throws an error as the flow client really is loaded and present in the DOM.

Expected behavior

There is no error

Minimal reproducible example

Tested with the Copilot hybrid test app

Versions

• Vaadin / Flow version:
• Java version:
• OS version:
• Browser version (if applicable):
• Application Server (if applicable):
• IDE (if applicable):

[vaadin-bot]

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

[vaadin-bot]

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