feat: add Vite 8 support

.changeset/support-vite-8.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": minor
+---
+
+Add support for Vite 8

.github/workflows/integration-full.yml

@@ -31,7 +31,7 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "ubuntu-latest"
-      node_version: "[20.18, 22]"
+      node_version: "[20.19, 22]"
       browser: '["chromium", "firefox"]'
 
   integration-windows:
@@ -50,5 +50,5 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "macos-latest"
-      node_version: "[20.18, 22]"
+      node_version: "[20.19, 22]"
       browser: '["webkit"]'

.github/workflows/integration-pr-windows-macos.yml

@@ -1,7 +1,7 @@
 name: PR (Full)
 
 # PRs touching @react-router/dev will also run on Ubuntu/Firefox, Windows/Edge and
-# OSX/WebKit as well as an Ubuntu/Chromium run on  Node 20.18.
+# OSX/WebKit as well as an Ubuntu/Chromium run on Node 20.19.
 
 on:
   pull_request:
@@ -22,7 +22,7 @@ jobs:
     uses: ./.github/workflows/shared-integration.yml
     with:
       os: "ubuntu-latest"
-      node_version: "[20.18]"
+      node_version: "[20.19]"
       browser: '["chromium"]'
 
   integration-firefox:

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
       fail-fast: false
       matrix:
         node:
-          - 20.18
+          - 20.19
           - 22
 
     runs-on: ubuntu-latest

integration/client-data-test.ts

@@ -606,7 +606,7 @@ test.describe("Client Data", () => {
                       }
                     `,
                     "app/routes/client-loader-critical.bubbled-server-loader-errors-are-persisted-for-hydrating-routes.parent.child.tsx": js`
-                      import { useRouteError, useLoaderData } from 'react-router'
+                      import { useLoaderData } from 'react-router'
                       export function loader() {
                         throw new Error('Child Server Error');
                       }

integration/helpers/create-fixture.ts

@@ -509,9 +509,6 @@ function reactRouterBuild(
     env: {
       ...process.env,
       NODE_ENV: mode || ServerMode.Production,
-      // Ensure build can pass in Rolldown. This can be removed once
-      // "preserveEntrySignatures" is supported in rolldown-vite.
-      ROLLDOWN_OPTIONS_VALIDATION: "loose",
     },
   });
 

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

@@ -19,14 +19,13 @@
     "@types/react": "catalog:react-canary",
     "@types/react-dom": "catalog:react-canary",
     "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^4.5.2",
+    "@vanilla-extract/vite-plugin": "^5.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "@vitejs/plugin-rsc": "catalog:",
     "cross-env": "^7.0.3",
     "typescript": "catalog:",
-    "vite": "^6.3.0",
-    "vite-env-only": "^3.0.1",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite": "^8.0.0",
+    "vite-env-only": "^3.0.1"
   },
   "dependencies": {
     "@mjackson/node-fetch-server": "0.6.1",

integration/helpers/templates.ts

@@ -3,7 +3,7 @@ const templates = [
   { name: "vite-5-template", displayName: "Vite 5" },
   { name: "vite-6-template", displayName: "Vite 6" },
   { name: "vite-7-beta-template", displayName: "Vite 7 Beta" },
-  { name: "vite-rolldown-template", displayName: "Vite Rolldown" },
+  { name: "vite-8-template", displayName: "Vite 8" },
 
   // RSC templates
   { name: "rsc-vite", displayName: "RSC (Vite)" },
@@ -25,5 +25,5 @@ export const viteMajorTemplates = getTemplates([
   "vite-5-template",
   "vite-6-template",
   "vite-7-beta-template",
-  "vite-rolldown-template",
+  "vite-8-template",
 ]);

integration/helpers/vite-rolldown-template/package.json → integration/helpers/vite-8-template/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "integration-vite-rolldown-template",
+  "name": "integration-vite-8-template",
   "version": "0.0.0",
   "private": true,
   "sideEffects": false,
   "type": "module",
   "scripts": {
     "dev": "react-router dev",
-    "build": "cross-env ROLLDOWN_OPTIONS_VALIDATION=loose react-router build",
+    "build": "react-router build",
     "start": "react-router-serve ./build/server/index.js",
     "typecheck": "react-router typegen && tsc"
   },
@@ -15,7 +15,7 @@
     "@react-router/node": "workspace:*",
     "@react-router/serve": "workspace:*",
     "@vanilla-extract/css": "^1.17.4",
-    "@vanilla-extract/vite-plugin": "^5.1.1",
+    "@vanilla-extract/vite-plugin": "^5.2.0",
     "express": "^4.19.2",
     "isbot": "^5.1.11",
     "react": "catalog:",
@@ -29,17 +29,12 @@
     "@react-router/remix-routes-option-adapter": "workspace:*",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "cross-env": "^7.0.3",
     "eslint": "^8.38.0",
     "typescript": "catalog:",
-    "vite": "npm:rolldown-vite@6.3.0-beta.5",
-    "vite-env-only": "^3.0.1",
-    "vite-tsconfig-paths": "^4.2.1"
-  },
-  "overrides": {
-    "vite": "npm:rolldown-vite@6.3.0-beta.5"
+    "vite": "^8.0.0",
+    "vite-env-only": "^3.0.1"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=20.19.0"
   }
 }

integration/helpers/vite-8-template/vite.config.ts

@@ -0,0 +1,7 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  resolve: { tsconfigPaths: true },
+  plugins: [reactRouter()],
+});

integration/helpers/vite.ts

@@ -90,18 +90,6 @@ export const viteConfig = {
   }: ViteConfigBuildArgs = {}) => {
     return dedent`
       build: {
-        // Detect rolldown-vite. This should ideally use "rolldownVersion"
-        // but that's not exported. Once that's available, this
-        // check should be updated to use it.
-        rollupOptions: "transformWithOxc" in (await import("vite"))
-          ? {
-              onwarn(warning, warn) {
-                // Ignore "The built-in minifier is still under development." warning
-                if (warning.code === "MINIFY_WARNING") return;
-                warn(warning);
-              },
-            }
-          : undefined,
         assetsInlineLimit: ${assetsInlineLimit ?? "undefined"},
         assetsDir: ${assetsDir ? `"${assetsDir}"` : "undefined"},
         cssCodeSplit: ${
@@ -124,22 +112,35 @@ export const viteConfig = {
       ${args.mdx ? 'import mdx from "@mdx-js/rollup";' : ""}
       ${args.vanillaExtract ? 'import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";' : ""}
       import { envOnlyMacros } from "vite-env-only";
-      import tsconfigPaths from "vite-tsconfig-paths";
-
-      export default async () => ({
-        ${args.port ? await viteConfig.server(args) : ""}
-        ${viteConfig.build(args)}
-        ${args.base ? `base: "${args.base}",` : ""}
-        envDir: ${args.envDir ? `"${args.envDir}"` : "undefined"},
-        plugins: [
+
+      export default async () => {
+        let vite = await import("vite");
+        let useNativeTsconfigPaths =
+          parseInt(vite.version.split(".")[0], 10) >= 8;
+        let plugins = [
           ${args.mdx ? "mdx()," : ""}
           ${args.vanillaExtract ? "vanillaExtractPlugin({ emitCssInSsr: true })," : ""}
           ${isRsc ? "    reactRouterRSC({ __runningWithinTheReactRouterMonoRepo: true })," : "reactRouter(),"}
           ${isRsc ? "rsc()," : ""}
           envOnlyMacros(),
-          tsconfigPaths()
-        ],
-      });
+        ];
+
+        if (!useNativeTsconfigPaths) {
+          let { default: tsconfigPaths } = await import(
+            /* @vite-ignore */ "vite-tsconfig-paths"
+          );
+          plugins.push(tsconfigPaths());
+        }
+
+        return {
+          ${args.port ? await viteConfig.server(args) : ""}
+          ${viteConfig.build(args)}
+          ${args.base ? `base: "${args.base}",` : ""}
+          envDir: ${args.envDir ? `"${args.envDir}"` : "undefined"},
+          resolve: { tsconfigPaths: useNativeTsconfigPaths },
+          plugins,
+        };
+      };
     `;
   },
 };
@@ -231,8 +232,8 @@ type FrameworkModeViteMajorTemplateName =
   | "vite-5-template"
   | "vite-6-template"
   | "vite-7-beta-template"
-  | "vite-plugin-cloudflare-template"
-  | "vite-rolldown-template";
+  | "vite-8-template"
+  | "vite-plugin-cloudflare-template";
 
 type FrameworkModeRscTemplateName = "rsc-vite-framework";
 
@@ -252,10 +253,7 @@ export const viteMajorTemplates = [
   { templateName: "vite-5-template", templateDisplayName: "Vite 5" },
   { templateName: "vite-6-template", templateDisplayName: "Vite 6" },
   { templateName: "vite-7-beta-template", templateDisplayName: "Vite 7 Beta" },
-  {
-    templateName: "vite-rolldown-template",
-    templateDisplayName: "Vite Rolldown",
-  },
+  { templateName: "vite-8-template", templateDisplayName: "Vite 8" },
 ] as const satisfies Array<{
   templateName: FrameworkModeViteMajorTemplateName;
   templateDisplayName: string;
@@ -315,9 +313,6 @@ export const build = ({
       ...process.env,
       ...colorEnv,
       ...env,
-      // Ensure build can pass in Rolldown. This can be removed once
-      // "preserveEntrySignatures" is supported in rolldown-vite.
-      ROLLDOWN_OPTIONS_VALIDATION: "loose",
     },
   });
 };

integration/vite-dev-test.ts

@@ -23,6 +23,10 @@ const fixtures = [
     templateName: "vite-6-template",
     v8_viteEnvironmentApi: true,
   },
+  {
+    templateName: "vite-8-template",
+    v8_viteEnvironmentApi: true,
+  },
   {
     templateName: "rsc-vite-framework",
     v8_viteEnvironmentApi: true,
@@ -332,6 +336,13 @@ test.describe("Vite dev", () => {
       });
 
       test("handles multiple set-cookie headers", async ({ dev, page }) => {
+        // TODO(v8): Remove this skip if we no longer support Node 20
+        test.skip(
+          templateName.includes("rsc") &&
+            parseInt(process.versions.node.split(".")[0], 10) === 20,
+          "vite-plugin-rsc dev cookie handling differs on Node 20.",
+        );
+
         const { port } = await dev(files, templateName);
 
         await page.goto(`http://localhost:${port}/set-cookies`, {

integration/vite-preview-test.ts

@@ -18,7 +18,7 @@ test.describe("Vite preview", () => {
       }),
       "vite.config.ts": await viteConfig.basic({
         port,
-        templateName: "vite-6-template",
+        templateName: "vite-8-template",
       }),
       "app/root.tsx": tsx`
         import { Links, Meta, Outlet, Scripts } from "react-router";
@@ -80,7 +80,7 @@ test.describe("Vite preview", () => {
       `,
     });
 
-    const { port } = await vitePreview(files, "vite-6-template");
+    const { port } = await vitePreview(files, "vite-8-template");
     await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle",
     });
@@ -101,7 +101,7 @@ test.describe("Vite preview", () => {
       }),
       "vite.config.ts": await viteConfig.basic({
         port,
-        templateName: "vite-6-template",
+        templateName: "vite-8-template",
       }),
       "app/root.tsx": tsx`
         import { Links, Meta, Outlet, Scripts, Link } from "react-router";
@@ -147,7 +147,7 @@ test.describe("Vite preview", () => {
       `,
     });
 
-    const { port } = await vitePreview(files, "vite-6-template");
+    const { port } = await vitePreview(files, "vite-8-template");
     await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle",
     });
@@ -177,7 +177,7 @@ test.describe("Vite preview", () => {
       }),
       "vite.config.ts": await viteConfig.basic({
         port,
-        templateName: "vite-6-template",
+        templateName: "vite-8-template",
       }),
       "app/root.tsx": tsx`
         import { Links, Meta, Outlet, Scripts } from "react-router";
@@ -222,7 +222,7 @@ test.describe("Vite preview", () => {
       `,
     });
 
-    const { port } = await vitePreview(files, "vite-6-template");
+    const { port } = await vitePreview(files, "vite-8-template");
     await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle",
     });
@@ -251,7 +251,7 @@ test.describe("Vite preview", () => {
       }),
       "vite.config.ts": await viteConfig.basic({
         port,
-        templateName: "vite-6-template",
+        templateName: "vite-8-template",
       }),
       "app/root.tsx": tsx`
         import { Links, Meta, Outlet, Scripts } from "react-router";
@@ -300,7 +300,7 @@ test.describe("Vite preview", () => {
       `,
     });
 
-    const { port } = await vitePreview(files, "vite-6-template");
+    const { port } = await vitePreview(files, "vite-8-template");
     await page.goto(`http://localhost:${port}/products/123`, {
       waitUntil: "networkidle",
     });
@@ -326,7 +326,7 @@ test.describe("Vite preview", () => {
       }),
       "vite.config.ts": await viteConfig.basic({
         port,
-        templateName: "vite-6-template",
+        templateName: "vite-8-template",
       }),
       "app/root.tsx": tsx`
         import { Links, Meta, Outlet, Scripts } from "react-router";
@@ -371,7 +371,7 @@ test.describe("Vite preview", () => {
       `,
     });
 
-    const { port } = await vitePreview(files, "vite-6-template");
+    const { port } = await vitePreview(files, "vite-8-template");
     await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle",
     });

integration/vite-server-bundles-test.ts

@@ -178,7 +178,7 @@ test.describe("Server bundles", () => {
             `),
             ...files,
           },
-          v8_viteEnvironmentApi ? "vite-6-template" : "vite-5-template",
+          v8_viteEnvironmentApi ? "vite-8-template" : "vite-5-template",
         );
       });
 

packages/react-router-dev/package.json

@@ -129,7 +129,7 @@
     "react-router": "workspace:^",
     "react-server-dom-webpack": "catalog:",
     "typescript": "^5.1.0",
-    "vite": "^5.1.0 || ^6.0.0 || ^7.0.0",
+    "vite": "^5.1.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
     "wrangler": "^3.28.2 || ^4.0.0"
   },
   "peerDependenciesMeta": {