Updates

Author: brophdawg11

integration/vite-spa-mode-test.ts

@@ -1068,7 +1068,9 @@ test.describe("SPA Mode", () => {
     });
   });
 
-  test("only imports top-level route modules when SSRing index.html", async ({ page }) => {
+  test("only imports the root route in the server build when SSRing index.html", async ({
+    page,
+  }) => {
     let fixture = await createFixture({
       spaMode: true,
       files: {
@@ -1123,6 +1125,9 @@ test.describe("SPA Mode", () => {
           import { logImport } from "../routeImportTracker";
           logImport("app/routes/_index.tsx");
 
+          // This should not cause an error on SSr because the module is not loaded
+          console.log(window);
+
           export default function Component() {
             return "index";
           }
@@ -1132,6 +1137,9 @@ test.describe("SPA Mode", () => {
           import { logImport } from "../routeImportTracker";
           logImport("app/routes/about.tsx");
 
+          // This should not cause an error on SSr because the module is not loaded
+          console.log(window);
+
           export default function Component() {
             const [mounted, setMounted] = React.useState(false);
             React.useEffect(() => setMounted(true), []);
@@ -1146,11 +1154,18 @@ test.describe("SPA Mode", () => {
       },
     });
 
-    let importedRoutes = (await fs.promises.readFile(path.join(fixture.projectDir, "ssr-route-imports.txt"), "utf-8")).trim().split("\n");
+    let importedRoutes = (
+      await fs.promises.readFile(
+        path.join(fixture.projectDir, "ssr-route-imports.txt"),
+        "utf-8"
+      )
+    )
+      .trim()
+      .split("\n");
     expect(importedRoutes).toStrictEqual([
       "app/root.tsx",
-      "app/routes/_index.tsx"
-      // we should NOT have imported app/routes/about.tsx
+      // we should not have imported app/routes/_index.tsx
+      // we should not have imported app/routes/about.tsx
     ]);
 
     appFixture = await createAppFixture(fixture);
@@ -1160,7 +1175,7 @@ test.describe("SPA Mode", () => {
     // @ts-expect-error
     expect(await page.evaluate(() => window.csrRouteImports)).toStrictEqual([
       "app/root.tsx",
-      "app/routes/about.tsx"
+      "app/routes/about.tsx",
     ]);
   });
 });

packages/react-router-dev/vite/plugin.ts

@@ -597,17 +597,7 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
       routes
     );
 
-    let isSpaMode =
-      !ctx.reactRouterConfig.ssr && ctx.reactRouterConfig.prerender == null;
-
-    let routeIdsToImport = new Set(Object.keys(routes));
-    if (isSpaMode) {
-      // In SPA mode, we only pre-render the top-level index route; for all
-      // other routes we stub out their imports, as they (and their deps) may
-      // not be compatible with server-side rendering. This also helps keep
-      // the build fast
-      routeIdsToImport = getRootRouteIds(routes);
-    }
+    let isSpaMode = isSpaModeEnabled(ctx.reactRouterConfig);
 
     return `
     import * as entryServer from ${JSON.stringify(
@@ -616,17 +606,19 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
     ${Object.keys(routes)
       .map((key, index) => {
         let route = routes[key]!;
-        if (routeIdsToImport.has(key)) {
+        if (isSpaMode && key !== "root") {
+          // In SPA mode, we only pre-render to the root route and it's `HydrateFallback`.
+          // Therefore, we can stub all other routes with an empty module as they
+          // (and their deps) may not be compatible with server-side rendering.
+          // This also helps keep the build fast.
+          return `const route${index} = { default: () => null };`;
+        } else {
           return `import * as route${index} from ${JSON.stringify(
             resolveFileUrl(
               ctx,
               resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)
             )
           )};`;
-        } else {
-          // we're not importing the route since we won't be rendering
-          // it via SSR; just stub it out
-          return `const route${index} = { default: () => null };`;
         }
       })
       .join("\n")}
@@ -2605,17 +2597,6 @@ function groupRoutesByParentId(manifest: GenericRouteManifest) {
   return routes;
 }
 
-/**
- * Return the route ids associated with the top-level index route
- *
- * i.e. "root", the top-level index route's id, and (if applicable) the ids of
- * any top-level layout/path-less routes in between
- */
-function getRootRouteIds(manifest: GenericRouteManifest): Set<string> {
-  const matches = matchRoutes(createPrerenderRoutes(manifest), "/");
-  return new Set(matches?.filter(Boolean).map((m) => m.route.id) || []);
-}
-
 // Create a skeleton route tree of paths
 function createPrerenderRoutes(
   manifest: GenericRouteManifest,