Fix validation of split route modules for root route (#13238)

Author: markdalgleish

.changeset/cuddly-dots-hear.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+When `future.unstable_splitRouteModules` is set to `"enforce"`, allow both splittable and unsplittable root route exports since it's always in a single chunk.

integration/split-route-modules-test.ts

@@ -462,6 +462,59 @@ test.describe("Split route modules", async () => {
       });
     });
 
+    test.describe("splittable routes with splittable root route exports", () => {
+      test.beforeAll(async () => {
+        port = await getPort();
+        cwd = await createProject({
+          "react-router.config.ts": reactRouterConfig({ splitRouteModules }),
+          "vite.config.js": await viteConfig.basic({ port }),
+          "app/root.tsx": js`
+            import { Outlet } from "react-router";
+            export const clientLoader = () => null;
+            export const clientAction = () => null;
+            export default function() {
+              return <Outlet />;
+            }
+          `,
+          // Make unsplittable routes valid so the build can pass
+          "app/routes/unsplittable.tsx": "export default function(){}",
+          "app/routes/mixed.tsx": "export default function(){}",
+        });
+      });
+
+      test("build passes", async () => {
+        let { status } = build({ cwd });
+        expect(status).toBe(0);
+      });
+    });
+
+    test.describe("splittable routes with unsplittable root route exports", () => {
+      test.beforeAll(async () => {
+        port = await getPort();
+        cwd = await createProject({
+          "react-router.config.ts": reactRouterConfig({ splitRouteModules }),
+          "vite.config.js": await viteConfig.basic({ port }),
+          "app/root.tsx": js`
+            import { Outlet } from "react-router";
+            const shared = null;
+            export const clientLoader = () => shared;
+            export const clientAction = () => shared;
+            export default function() {
+              return <Outlet />;
+            }
+          `,
+          // Make unsplittable routes valid so the build can pass
+          "app/routes/unsplittable.tsx": "export default function(){}",
+          "app/routes/mixed.tsx": "export default function(){}",
+        });
+      });
+
+      test("build passes", async () => {
+        let { status } = build({ cwd });
+        expect(status).toBe(0);
+      });
+    });
+
     test.describe("unsplittable routes", () => {
       test.beforeAll(async () => {
         port = await getPort();

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

@@ -3056,6 +3056,13 @@ const resolveRouteFileCode = async (
   );
 };
 
+function isRootRouteModuleId(ctx: ReactRouterPluginContext, id: string) {
+  return (
+    normalizeRelativeFilePath(id, ctx.reactRouterConfig) ===
+    ctx.reactRouterConfig.routes.root.file
+  );
+}
+
 async function detectRouteChunksIfEnabled(
   cache: Cache,
   ctx: ReactRouterPluginContext,
@@ -3082,10 +3089,7 @@ async function detectRouteChunksIfEnabled(
   // for all requests, all of its chunks would always be loaded up front during
   // the initial page load. Instead of firing off multiple requests to resolve
   // the root route code, we want it to be downloaded in a single request.
-  if (
-    normalizeRelativeFilePath(id, ctx.reactRouterConfig) ===
-    ctx.reactRouterConfig.routes.root.file
-  ) {
+  if (isRootRouteModuleId(ctx, id)) {
     return noRouteChunks();
   }
 
@@ -3130,6 +3134,10 @@ function validateRouteChunks({
   id: string;
   valid: Record<Exclude<RouteChunkName, "main">, boolean>;
 }): void {
+  if (isRootRouteModuleId(ctx, id)) {
+    return;
+  }
+
   let invalidChunks = Object.entries(valid)
     .filter(([_, isValid]) => !isValid)
     .map(([chunkName]) => chunkName);