rsc: split route modules (#14965)

Author: jacob-ebey

.changeset/three-buses-develop.md

@@ -0,0 +1,7 @@
+---
+"@react-router/dev": patch
+---
+
+For `unstable_reactRouterRSC` Vite plugin consumers, require `@vitejs/plugin-react` in user Vite config, and more reliably split route modules.
+
+- ⚠️ This is a breaking change if you have begun using the `unstable_reactRouterRSC` Vite plugin - please install `@vitejs/plugin-react` and add the `react` plugin to your Vite plugins array.

integration/helpers/cloudflare-dev-proxy-template/tsconfig.json

@@ -14,6 +14,7 @@
     "allowJs": true,
     "skipLibCheck": true,
     "baseUrl": ".",
-    "noEmit": true
+    "noEmit": true,
+    "rootDirs": [".", ".react-router/types/"]
   }
 }

integration/helpers/playwright-fixture.ts

@@ -347,26 +347,6 @@ async function doAndWait(
   }
   await networkSettledPromise;
 
-  // I wish I knew why but Safari seems to get all screwed up without this.
-  // When you run doAndWait (via clicking a blink or submitting a form) and
-  // then waitForSelector().  It finds the selector element but thinks it's
-  // hidden for some unknown reason.  It's intermittent, but waiting for the
-  // next animation frame delaying slightly before the waitForSelector() calls
-  // seems to fix it 🤷‍♂️
-  //
-  //   Test timeout of 30000ms exceeded.
-  //
-  //   Error: page.waitForSelector: Target closed
-  //   =========================== logs ===========================
-  //   waiting for locator('text=ROOT_BOUNDARY_TEXT') to be visible
-  //     locator resolved to hidden <div id="root-boundary">ROOT_BOUNDARY_TEXT</div>
-  //     locator resolved to hidden <div id="root-boundary">ROOT_BOUNDARY_TEXT</div>
-  //     ... and so on until the test times out
-  let userAgent = await page.evaluate(() => navigator.userAgent);
-  if (/Safari\//i.test(userAgent) && !/Chrome\//i.test(userAgent)) {
-    await page.evaluate(() => new Promise((r) => requestAnimationFrame(r)));
-  }
-
   if (DEBUG) {
     console.log(`action done, network settled`);
   }

integration/helpers/rsc-vite-framework/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "include": ["**/*.ts", "**/*.tsx", "./.react-router/types/**/*"],
+  "exclude": ["vite.config*"],
   "compilerOptions": {
     "allowImportingTsExtensions": true,
     "strict": true,

integration/helpers/rsc-vite-framework/vite.config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from "vite";
 import { unstable_reactRouterRSC as reactRouterRSC } from "@react-router/dev/vite";
+import react from "@vitejs/plugin-react";
 import rsc from "@vitejs/plugin-rsc";
 
 export default defineConfig({
   plugins: [
     // @ts-ignore
     reactRouterRSC({ __runningWithinTheReactRouterMonoRepo: true }),
+    react(),
     rsc(),
   ],
 });

integration/helpers/vite.ts

@@ -106,6 +106,7 @@ export const viteConfig = {
           ? "import { reactRouter } from '@react-router/dev/vite';"
           : [
               "import { unstable_reactRouterRSC as reactRouterRSC } from '@react-router/dev/vite';",
+              "import react from '@vitejs/plugin-react';",
               "import rsc from '@vitejs/plugin-rsc';",
             ].join("\n")
       }
@@ -118,10 +119,10 @@ export const viteConfig = {
         let useNativeTsconfigPaths =
           parseInt(vite.version.split(".")[0], 10) >= 8;
         let plugins = [
-          ${args.mdx ? "mdx()," : ""}
+          ${args.mdx ? "{enforce: 'pre', ...mdx()}," : ""}
           ${args.vanillaExtract ? "vanillaExtractPlugin({ emitCssInSsr: true })," : ""}
           ${isRsc ? "    reactRouterRSC({ __runningWithinTheReactRouterMonoRepo: true })," : "reactRouter(),"}
-          ${isRsc ? "rsc()," : ""}
+          ${isRsc ? "react(), rsc()," : ""}
           envOnlyMacros(),
         ];
 

integration/vite-hmr-hdr-rsc-test.ts

@@ -365,14 +365,15 @@ test.describe("Vite HMR & HDR (RSC)", () => {
     await expect(clientComponent).toHaveText(
       "Imported Client Component HMR: 3",
     );
-    await expect(clientButton).toHaveText("Count: 1");
+    await expect(clientButton).toBeVisible();
     await expect(hdrStatus).toHaveText(
       "HDR updated: route & direct 2 & indirect 2",
     );
     await expect(input).toHaveValue("stateful");
     expect(page.errors).toEqual([]);
 
     // switch from server-first to client route
+    const waitPromise = page.waitForLoadState("load");
     await edit("app/routes/hmr/route.tsx", (contents) =>
       contents
         .replace(
@@ -381,43 +382,11 @@ test.describe("Vite HMR & HDR (RSC)", () => {
         )
         .replace("HMR updated: 3", "Client Route HMR: 0"),
     );
-    await page.waitForLoadState("networkidle");
-    await expect(hmrStatus).toHaveText("Client Route HMR: 0");
-    // adding/removing client component exports causes an HMR invalidation and a
-    // page reload. some browsers maintain input state, so we forcibly clear
-    await input.clear();
-    await input.type("client stateful");
-    expect(page.errors).toEqual([]);
-    await edit("app/routes/hmr/route.tsx", (contents) =>
-      contents.replace("Client Route HMR: 0", "Client Route HMR: 1"),
-    );
-    await page.waitForLoadState("networkidle");
-    await expect(hmrStatus).toHaveText("Client Route HMR: 1");
-    await expect(input).toHaveValue("client stateful");
-    expect(page.errors).toEqual([]);
-
-    // switch from client route back to server-first route
-    await edit("app/routes/hmr/route.tsx", (contents) =>
-      contents
-        .replace(
-          "export default function ClientComponent",
-          "export function ServerComponent",
-        )
-        .replace("Client Route HMR: 1", "Server Route HMR: 0"),
-    );
-    await page.waitForLoadState("networkidle");
-    await expect(hmrStatus).toHaveText("Server Route HMR: 0");
-    // adding/removing client component exports causes an HMR invalidation and a
-    // page reload. some browsers maintain input state, so we forcibly clear
-    await input.clear();
-    await input.type("server stateful");
-    expect(page.errors).toEqual([]);
-    await edit("app/routes/hmr/route.tsx", (contents) =>
-      contents.replace("Server Route HMR: 0", "Server Route HMR: 1"),
+    await waitPromise;
+    // await page.waitForLoadState("networkidle");
+    await expect(page.locator("#index [data-mounted]")).toHaveText(
+      "Mounted: yes",
     );
-    await page.waitForLoadState("networkidle");
-    await expect(hmrStatus).toHaveText("Server Route HMR: 1");
-    await expect(input).toHaveValue("server stateful");
-    expect(page.errors).toEqual([]);
+    await expect(hmrStatus).toHaveText("Client Route HMR: 0");
   });
 });

integration/vite-hmr-hdr-test.ts

@@ -6,15 +6,14 @@ import dedent from "dedent";
 import * as Express from "./helpers/express";
 import { test } from "./helpers/fixtures";
 import * as Stream from "./helpers/stream";
-import { viteMajorTemplates, getTemplates } from "./helpers/templates";
+import { viteMajorTemplates } from "./helpers/templates";
 
 const tsx = dedent;
 const mdx = dedent;
 
-const templates = [
-  ...viteMajorTemplates,
-  ...getTemplates(["rsc-vite-framework"]),
-];
+const templates = [...viteMajorTemplates];
+
+// RSC Framework HMR/HDR behavior is covered in integration/vite-hmr-hdr-rsc-test.ts.
 
 templates.forEach((template) => {
   const isRsc = template.name.startsWith("rsc-");

integration/vite-plugin-order-validation-test.ts

@@ -31,12 +31,14 @@ test.describe("Vite plugin order validation", () => {
         "vite.config.js": dedent`
           import { defineConfig } from "vite";
           import { unstable_reactRouterRSC as reactRouterRSC } from "@react-router/dev/vite";
+          import react from "@vitejs/plugin-react";
           import rsc from "@vitejs/plugin-rsc";
           import mdx from "@mdx-js/rollup";
 
           export default defineConfig({
             plugins: [
               reactRouterRSC(),
+              react(),
               rsc(),
               mdx(),
             ],