feat: update build for react router v8

app/routes/auth/login/page.tsx

@@ -15,13 +15,13 @@ import { OidcConfigErrorNotice, OidcDiscoveryFailedNotice } from "./config-error
 import Logout from "./logout";
 import { OidcErrorNotice } from "./oidc-error";
 
-export async function loader({ request, context }: Route.LoaderArgs) {
+export async function loader({ request, context, url }: Route.LoaderArgs) {
   try {
     await context.auth.require(request);
     return redirect("/machines");
   } catch {}
 
-  const qp = new URL(request.url).searchParams;
+  const qp = url.searchParams;
   const urlState = qp.get("s") ?? undefined;
 
   const oidcService = context.oidc.state === "enabled" ? context.oidc.value : undefined;

app/routes/auth/oidc-callback.ts

@@ -7,13 +7,12 @@ import { createOidcStateCookie } from "~/utils/oidc-state";
 
 import type { Route } from "./+types/oidc-callback";
 
-export async function loader({ request, context }: Route.LoaderArgs) {
+export async function loader({ request, context, url }: Route.LoaderArgs) {
   if (context.oidc.state !== "enabled") {
     throw data(`OIDC is unavailable: ${context.oidc.reason}`, { status: 501 });
   }
   const service = context.oidc.value;
 
-  const url = new URL(request.url);
   if (url.searchParams.toString().length === 0) {
     return redirect("/login?s=error_no_query");
   }

app/routes/ssh/page.tsx

@@ -22,8 +22,8 @@ export const shouldRevalidate: ShouldRevalidateFunction = () => {
   return false;
 };
 
-export async function loader({ request, params, context }: Route.LoaderArgs) {
+export async function loader({ request, params, context, url }: Route.LoaderArgs) {
-  const origin = new URL(request.url).origin;
+  const origin = url.origin;
   const assets = [WASM_HELPER_URL, WASM_MODULE_URL];
   const missing: string[] = [];
 
@@ -48,7 +48,7 @@ export async function loader({ request, params, context }: Route.LoaderArgs) {
   }
 
   const hostname = params.id;
-  const username = new URL(request.url).searchParams.get("user") || undefined;
+  const username = url.searchParams.get("user") || undefined;
 
   const nodes = await api.nodes.list();
   const node = nodes.find((n) => n.givenName === hostname);

package.json

@@ -9,7 +9,7 @@
     "build": "react-router build",
     "dev": "HEADPLANE_CONFIG_PATH=./config.example.yaml react-router dev | pino-pretty -c",
     "start": "node build/server/index.js",
-    "typecheck": "react-router typegen && tsgo",
+    "typecheck": "react-router typegen && tsc",
     "test:unit": "vitest run --project unit",
     "test:integration": "vitest run --project integration:*",
     "docs:dev": "vitepress dev docs",
@@ -19,9 +19,9 @@
     "format": "oxfmt"
   },
   "dependencies": {
-    "@base-ui/react": "^1.3.0",
+    "@base-ui/react": "^1.6.0",
     "@codemirror/language": "^6.12.3",
-    "@codemirror/view": "^6.41.0",
+    "@codemirror/view": "^6.43.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -30,52 +30,51 @@
     "@iconify/react": "^6.0.2",
     "@kubernetes/client-node": "^1.4.0",
     "@lezer/highlight": "^1.2.3",
-    "@react-router/node": "^7.14.0",
+    "@react-router/node": "^7.18.0",
-    "@uiw/react-codemirror": "4.25.9",
+    "@uiw/react-codemirror": "4.25.10",
-    "arktype": "^2.2.0",
+    "arktype": "^2.2.1",
     "clsx": "^2.1.1",
     "drizzle-orm": "1.0.0-beta.21",
-    "isbot": "5.1.37",
+    "isbot": "5.1.43",
-    "jose": "6.2.2",
+    "jose": "6.2.3",
-    "js-yaml": "^4.1.1",
+    "js-yaml": "^4.2.0",
-    "lucide-react": "^1.8.0",
+    "lucide-react": "^1.21.0",
     "mime": "^4.1.0",
     "pino": "^10.3.1",
-    "react": "19.2.5",
+    "react": "19.2.7",
-    "react-codemirror-merge": "4.25.9",
+    "react-codemirror-merge": "4.25.10",
-    "react-dom": "19.2.5",
+    "react-dom": "19.2.7",
-    "react-error-boundary": "^6.1.1",
+    "react-error-boundary": "^6.1.2",
-    "react-router": "^7.14.0",
+    "react-router": "^7.18.0",
-    "react-router-dom": "^7.14.0",
+    "react-router-dom": "^7.18.0",
     "restty": "^0.1.35",
-    "tailwind-merge": "3.5.0",
+    "tailwind-merge": "3.6.0",
     "ulidx": "2.4.1",
-    "undici": "8.0.2",
+    "undici": "8.5.0",
-    "yaml": "2.8.3"
+    "yaml": "2.9.0"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.14.0",
+    "@react-router/dev": "^7.18.0",
     "@shopify/lang-jsonc": "^1.0.1",
-    "@tailwindcss/vite": "^4.2.2",
+    "@tailwindcss/vite": "^4.3.1",
     "@types/js-yaml": "^4.0.9",
-    "@types/node": "^25.6.0",
+    "@types/node": "^26.0.0",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260410.1",
     "drizzle-kit": "1.0.0-beta.21",
     "lefthook": "^2.1.5",
-    "oxfmt": "^0.44.0",
+    "oxfmt": "^0.55.0",
-    "oxlint": "^1.59.0",
+    "oxlint": "^1.70.0",
-    "oxlint-tsgolint": "^0.20.0",
+    "oxlint-tsgolint": "^0.23.0",
     "pino-pretty": "^13.1.3",
-    "tailwindcss": "^4.2.2",
+    "tailwindcss": "^4.3.1",
     "tailwindcss-animate": "^1.0.7",
-    "testcontainers": "^11.14.0",
+    "testcontainers": "^12.0.3",
-    "tsx": "^4.21.0",
+    "tsx": "^4.22.4",
-    "typescript": "^6.0.2",
+    "typescript": "7.0.1-rc",
-    "vite": "^8.0.8",
+    "vite": "^8.0.16",
     "vitepress": "next",
-    "vitest": "^4.1.4"
+    "vitest": "^4.1.9"
   },
   "engines": {
     "node": ">=24.2 <25",

react-router.config.ts

@@ -6,5 +6,9 @@ export default {
   future: {
     unstable_optimizeDeps: true,
     v8_splitRouteModules: "enforce",
+    v8_middleware: true,
+    v8_viteEnvironmentApi: true,
+    v8_passThroughRequests: true,
+    v8_trailingSlashAwareDataRequests: true,
   },
 } satisfies Config;

vite.config.ts

@@ -44,7 +44,7 @@ if (!VERSION) {
 const config = await readFile("config.example.yaml", "utf-8");
 const { server } = parse(config);
 
-export default defineConfig(({ command, isSsrBuild }) => ({
+export default defineConfig(({ command }) => ({
   base: command === "build" ? `${PREFIX}/` : undefined,
   plugins: [
     headplaneDevServer({
@@ -65,20 +65,35 @@ export default defineConfig(({ command, isSsrBuild }) => ({
   build: {
     target: "baseline-widely-available",
     sourcemap: true,
-    rollupOptions:
+  },
-      command === "build"
+  environments: {
-        ? {
+    client: {
-            // Override the SSR build entry so React Router emits the
+      build: {
-            // production bootstrap (`app/server/main.ts`) as
+        rollupOptions:
-            // `build/server/index.js`. It transitively imports the
+          command === "build"
-            // SSR entry, which pulls in the React Router server build
+            ? {
-            // via the virtual module `virtual:react-router/server-build`.
+                // Exclude WASM from the client since it fetches from the server
-            input: isSsrBuild ? PROD_ENTRY : undefined,
+                external: [/\.wasm(\?url)?$/],
-
+              }
-            // Exclude WASM from the client since it fetches from the server
+            : undefined,
-            external: isSsrBuild ? [] : [/\.wasm(\?url)?$/],
+      },
-          }
+    },
-        : undefined,
+    ssr: {
+      build: {
+        rollupOptions:
+          command === "build"
+            ? {
+                // Override the SSR build entry so React Router emits the
+                // production bootstrap (`app/server/main.ts`) as
+                // `build/server/index.js`. It transitively imports the
+                // SSR entry, which pulls in the React Router server build
+                // via the virtual module `virtual:react-router/server-build`.
+                input: PROD_ENTRY,
+                external: [],
+              }
+            : undefined,
+      },
+    },
   },
   ssr: {
     noExternal: command === "build" ? true : undefined,