fix: Pass route data through window.Vaadin.routesConfig instead of an import

flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskGenerateBootstrap.java

@@ -76,6 +76,9 @@ protected String getFileContent() {
         List<String> lines = new ArrayList<>();
         lines.add(String.format("import './%s';%n", FEATURE_FLAGS_FILE_NAME));
         lines.add(String.format("import '%s';%n", getIndexTsEntryPath()));
+        if (options.isReactEnabled()) {
+            lines.add("import './vaadin-react.js';");
+        }
         if (!options.isProductionMode()) {
             lines.add(DEV_TOOLS_IMPORT);
         }

flow-server/src/main/java/com/vaadin/flow/server/frontend/TaskGenerateReactFiles.java

@@ -99,6 +99,7 @@ function build() {
             """;
 
     private static final String FLOW_TSX = "Flow.tsx";
+    private static final String VAADIN_REACT_TSX = "vaadin-react.tsx";
     private static final String REACT_ADAPTER_TEMPLATE = "ReactAdapter.template";
     private static final String REACT_ADAPTER_TSX = "ReactAdapter.tsx";
     static final String FLOW_FLOW_TSX = "flow/" + FLOW_TSX;
@@ -146,13 +147,17 @@ private void doExecute() throws ExecutionFailedException {
         File frontendDirectory = options.getFrontendDirectory();
         File frontendGeneratedFolder = options.getFrontendGeneratedFolder();
         File flowTsx = new File(frontendGeneratedFolder, FLOW_FLOW_TSX);
+        File vaadinReactTsx = new File(frontendGeneratedFolder,
+                VAADIN_REACT_TSX);
         File reactAdapterTsx = new File(frontendGeneratedFolder,
                 FLOW_REACT_ADAPTER_TSX);
         File routesTsx = new File(frontendDirectory, FrontendUtils.ROUTES_TSX);
         File frontendGeneratedFolderRoutesTsx = new File(
                 frontendGeneratedFolder, FrontendUtils.ROUTES_TSX);
         try {
-            writeFile(flowTsx, getFlowTsxFileContent(routesTsx.exists()));
+            writeFile(flowTsx, getFileContent(FLOW_TSX));
+            writeFile(vaadinReactTsx,
+                    getVaadinReactTsContent(routesTsx.exists()));
             if (fileAvailable(REACT_ADAPTER_TEMPLATE)) {
                 String reactAdapterContent = getFileContent(
                         REACT_ADAPTER_TEMPLATE);
@@ -192,11 +197,14 @@ private void cleanup() throws ExecutionFailedException {
             File frontendDirectory = options.getFrontendDirectory();
             File frontendGeneratedFolder = options.getFrontendGeneratedFolder();
             File flowTsx = new File(frontendGeneratedFolder, FLOW_FLOW_TSX);
+            File vaadinReactTsx = new File(frontendGeneratedFolder,
+                    VAADIN_REACT_TSX);
             File reactAdapterTsx = new File(frontendGeneratedFolder,
                     FLOW_REACT_ADAPTER_TSX);
             File frontendGeneratedFolderRoutesTsx = new File(
                     frontendGeneratedFolder, FrontendUtils.ROUTES_TSX);
             FileUtils.deleteQuietly(flowTsx);
+            FileUtils.deleteQuietly(vaadinReactTsx);
             FileUtils.deleteQuietly(reactAdapterTsx);
             FileUtils.deleteQuietly(frontendGeneratedFolderRoutesTsx);
 
@@ -230,9 +238,10 @@ private void cleanup() throws ExecutionFailedException {
         }
     }
 
-    private String getFlowTsxFileContent(boolean frontendRoutesTsExists)
+    private String getVaadinReactTsContent(boolean frontendRoutesTsExists)
             throws IOException {
-        return getFileContent(FLOW_TSX).replace(ROUTES_JS_IMPORT_PATH_TOKEN,
+        return getFileContent(VAADIN_REACT_TSX).replace(
+                ROUTES_JS_IMPORT_PATH_TOKEN,
                 (frontendRoutesTsExists)
                         ? FrontendUtils.FRONTEND_FOLDER_ALIAS
                                 + FrontendUtils.ROUTES_JS

flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx

@@ -15,14 +15,14 @@
  */
 /// <reference lib="es2018" />
 import { Flow as _Flow } from "Frontend/generated/jar-resources/Flow.js";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import {
     matchRoutes,
     useBlocker,
     useLocation,
-    useNavigate,
+    useNavigate
 } from "react-router-dom";
-import { routes } from "%routesJsImportPath%";
+import type { AgnosticRouteObject } from '@remix-run/router';
 
 const flow = new _Flow({
     imports: () => import("Frontend/generated/flow/generated-flow-imports.js")
@@ -238,6 +238,7 @@ function Flow() {
                 return;
             }
             const {pathname, search} = blocker.location;
+            const routes = ((window as any)?.Vaadin?.routesConfig || []) as AgnosticRouteObject[];
             let matched = matchRoutes(Array.from(routes), window.location.pathname);
 
             // Navigation between server routes
@@ -369,3 +370,17 @@ export const reactElement = (tag: string, props?: Properties, onload?: () => voi
 };
 
 export default Flow;
+
+// @ts-ignore
+if (import.meta.hot) {
+  // @ts-ignore
+  import.meta.hot.accept((newModule) => {
+    // A hot module replace for Flow.tsx happens when any JS/TS imported through @JsModule
+    // or similar is updated because this updates generated-flow-imports.js and that in turn
+    // is imported by this file. We have no means of hot replacing those files, e.g. some
+    // custom lit element so we need to reload the page. */
+    if (newModule) {
+      window.location.reload();
+    }
+  });
+}

flow-server/src/main/resources/com/vaadin/flow/server/frontend/vaadin-react.tsx

@@ -0,0 +1,4 @@
+import { routes } from "%routesJsImportPath%";
+
+(window as any).Vaadin ??= {};
+(window as any).Vaadin.routesConfig = routes;