remix-run · markdalgleish · Feb 14, 2025 · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024
diff --git a/.changeset/lovely-files-move.md b/.changeset/lovely-files-move.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": minor
+---
+
+Add Vite v6 support
diff --git a/docs/guides/typescript.md b/docs/guides/typescript.md
@@ -35,7 +35,7 @@ The Remix CLI will not perform any type checking. Instead, you'll want to use Ty
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.23.1",
     "typescript": "^5.1.6",
-    "vite": "^5.1.4"
+    "vite": "^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"

diff --git a/integration/helpers/vite-template/.gitignore → ...ration/helpers/vite-5-template/.gitignore b/integration/helpers/vite-template/.gitignore → ...ration/helpers/vite-5-template/.gitignore
diff --git a/...ration/helpers/vite-template/app/root.tsx → ...tion/helpers/vite-5-template/app/root.tsx b/...ration/helpers/vite-template/app/root.tsx → ...tion/helpers/vite-5-template/app/root.tsx
diff --git a/...lpers/vite-template/app/routes/_index.tsx → ...ers/vite-5-template/app/routes/_index.tsx b/...lpers/vite-template/app/routes/_index.tsx → ...ers/vite-5-template/app/routes/_index.tsx
diff --git a/integration/helpers/vite-template/env.d.ts → integration/helpers/vite-5-template/env.d.ts b/integration/helpers/vite-template/env.d.ts → integration/helpers/vite-5-template/env.d.ts
diff --git a/integration/helpers/vite-5-template/package.json b/integration/helpers/vite-5-template/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "integration-vite-5-template",
+  "version": "0.0.0",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "remix vite:dev",
+    "build": "remix vite:build",
+    "start": "remix-serve ./build/server/index.js",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/express": "workspace:*",
+    "@remix-run/node": "workspace:*",
+    "@remix-run/react": "workspace:*",
+    "@remix-run/serve": "workspace:*",
+    "@vanilla-extract/css": "^1.10.0",
+    "@vanilla-extract/vite-plugin": "^3.9.2",
+    "express": "^4.20.0",
+    "isbot": "^4.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "serialize-javascript": "^6.0.1"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "workspace:*",
+    "@remix-run/eslint-config": "workspace:*",
+    "@remix-run/route-config": "workspace:*",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.38.0",
+    "typescript": "^5.1.6",
+    "vite": "5.1.8",
+    "vite-env-only": "^2.0.0",
+    "vite-tsconfig-paths": "^4.2.1",
+    "wrangler": "^3.24.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}
diff --git a/.../helpers/vite-template/public/favicon.ico → ...elpers/vite-5-template/public/favicon.ico b/.../helpers/vite-template/public/favicon.ico → ...elpers/vite-5-template/public/favicon.ico
diff --git a/...ation/helpers/vite-template/tsconfig.json → ...ion/helpers/vite-5-template/tsconfig.json b/...ation/helpers/vite-template/tsconfig.json → ...ion/helpers/vite-5-template/tsconfig.json
diff --git a/...tion/helpers/vite-template/vite.config.ts → ...on/helpers/vite-5-template/vite.config.ts b/...tion/helpers/vite-template/vite.config.ts → ...on/helpers/vite-5-template/vite.config.ts
diff --git a/integration/helpers/vite-6-template/.gitignore b/integration/helpers/vite-6-template/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env
diff --git a/integration/helpers/vite-6-template/app/root.tsx b/integration/helpers/vite-6-template/app/root.tsx
@@ -0,0 +1,25 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
diff --git a/integration/helpers/vite-6-template/app/routes/_index.tsx b/integration/helpers/vite-6-template/app/routes/_index.tsx
@@ -0,0 +1,41 @@
+import type { MetaFunction } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix App" },
+    { name: "description", content: "Welcome to Remix!" },
+  ];
+};
+
+export default function Index() {
+  return (
+    <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
+      <h1>Welcome to Remix</h1>
+      <ul>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/blog"
+            rel="noreferrer"
+          >
+            15m Quickstart Blog Tutorial
+          </a>
+        </li>
+        <li>
+          <a
+            target="_blank"
+            href="https://remix.run/tutorials/jokes"
+            rel="noreferrer"
+          >
+            Deep Dive Jokes App Tutorial
+          </a>
+        </li>
+        <li>
+          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
+            Remix Docs
+          </a>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/integration/helpers/vite-6-template/env.d.ts b/integration/helpers/vite-6-template/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />
diff --git a/...ration/helpers/vite-template/package.json → ...tion/helpers/vite-6-template/package.json b/...ration/helpers/vite-template/package.json → ...tion/helpers/vite-6-template/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "integration-vite-template",
+  "name": "integration-vite-6-template",
   "version": "0.0.0",
   "private": true,
   "sideEffects": false,
@@ -31,7 +31,7 @@
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.38.0",
     "typescript": "^5.1.6",
-    "vite": "5.1.8",
+    "vite": "^6.0.0",
     "vite-env-only": "^2.0.0",
     "vite-tsconfig-paths": "^4.2.1",
     "wrangler": "^3.24.0"

diff --git a/integration/helpers/vite-6-template/public/favicon.ico b/integration/helpers/vite-6-template/public/favicon.ico
diff --git a/integration/helpers/vite-6-template/tsconfig.json b/integration/helpers/vite-6-template/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true
+  }
+}
diff --git a/integration/helpers/vite-6-template/vite.config.ts b/integration/helpers/vite-6-template/vite.config.ts
@@ -0,0 +1,7 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [remix(), tsconfigPaths()],
+});
diff --git a/integration/helpers/vite-cloudflare-template/package.json b/integration/helpers/vite-cloudflare-template/package.json
@@ -11,9 +11,9 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/cloudflare": "2.15.3",
-    "@remix-run/cloudflare-pages": "2.15.3",
-    "@remix-run/react": "2.15.3",
+    "@remix-run/cloudflare": "workspace:*",
+    "@remix-run/cloudflare-pages": "workspace:*",
+    "@remix-run/react": "workspace:*",
     "isbot": "^4.1.0",
     "miniflare": "^3.20231030.4",
     "react": "^18.2.0",
@@ -26,7 +26,7 @@
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "typescript": "^5.1.6",
-    "vite": "5.1.8",
+    "vite": "^6.0.0",
     "vite-tsconfig-paths": "^4.2.1",
     "wrangler": "^3.24.0"
   },

diff --git a/integration/helpers/vite.ts b/integration/helpers/vite.ts
@@ -1,5 +1,5 @@
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
-import path from "node:path";
+import path from "pathe";
 import fs from "node:fs/promises";
 import type { Readable } from "node:stream";
 import url from "node:url";
@@ -96,11 +96,22 @@ export const EXPRESS_SERVER = (args: {
     app.listen(port, () => console.log('http://localhost:' + port));
   `;
 
-type TemplateName = "vite-template" | "vite-cloudflare-template";
+type TemplateName =
+  | "vite-5-template"
+  | "vite-6-template"
+  | "vite-cloudflare-template";
+
+export const viteMajorTemplates = [
+  { templateName: "vite-5-template", templateDisplayName: "Vite 5" },
+  { templateName: "vite-6-template", templateDisplayName: "Vite 6" },
+] as const satisfies ReadonlyArray<{
+  templateName: TemplateName;
+  templateDisplayName: string;
+}>;
 
 export async function createProject(
   files: Record<string, string> = {},
-  templateName: TemplateName = "vite-template"
+  templateName: TemplateName = "vite-5-template"
 ) {
   let projectName = `remix-${Math.random().toString(32).slice(2)}`;
   let projectDir = path.join(TMP_DIR, projectName);
@@ -246,7 +257,10 @@ type Fixtures = {
     port: number;
     cwd: string;
   }>;
-  customDev: (files: Files) => Promise<{
+  customDev: (
+    files: Files,
+    templateName?: TemplateName
+  ) => Promise<{
     port: number;
     cwd: string;
   }>;
@@ -280,7 +294,7 @@ export const test = base.extend<Fixtures>({
   // eslint-disable-next-line no-empty-pattern
   customDev: async ({}, use) => {
     let stop: (() => unknown) | undefined;
-    await use(async (files) => {
+    await use(async (files, template) => {
       let port = await getPort();
       let cwd = await createProject(await files({ port }));
       stop = await customDev({ cwd, port });

diff --git a/integration/package.json b/integration/package.json
@@ -30,6 +30,7 @@
     "globby": "^11.1.0",
     "isbot": "^4.1.0",
     "npm-run-all": "^4.1.5",
+    "pathe": "^1.1.2",
     "pidtree": "^0.6.0",
     "postcss": "^8.4.19",
     "postcss-import": "^15.1.0",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="@remix-run/node" />
		/// <reference types="vite/client" />