chore: update to react router v8

app/server/app.ts

@@ -74,10 +74,7 @@ export async function dispose(): Promise<void> {
 // TODO: `getLoadContext` is the right place to handle reverse proxy
 // translation — better than doing it in the OIDC client because it
 // applies to all requests, not just OIDC ones.
-export default createRequestListener({
-  build,
-  mode: import.meta.env.MODE,
-  getLoadContext: (request, client) => {
+function getLoadContext(request: Request, client: ClientAddress) {
   ctx.auth.registerRequestClientAddress(request, client.address);
 
   const routerContext = new RouterContextProvider();
@@ -93,5 +90,14 @@ export default createRequestListener({
   routerContext.set(oidcContext, ctx.oidc);
   routerContext.set(requestApiContext, ctx.apiForRequest);
   return routerContext;
-  },
+}
+
+interface ClientAddress {
+  address?: string;
+}
+
+export default createRequestListener({
+  build,
+  mode: import.meta.env.MODE,
+  getLoadContext,
 });

package.json

@@ -30,7 +30,7 @@
     "@iconify/react": "^6.0.2",
     "@kubernetes/client-node": "^1.4.0",
     "@lezer/highlight": "^1.2.3",
-    "@react-router/node": "^7.18.0",
+    "@react-router/node": "^8.0.1",
     "@uiw/react-codemirror": "4.25.10",
     "arktype": "^2.2.1",
     "clsx": "^2.1.1",
@@ -45,8 +45,7 @@
     "react-codemirror-merge": "4.25.10",
     "react-dom": "19.2.7",
     "react-error-boundary": "^6.1.2",
-    "react-router": "^7.18.0",
-    "react-router-dom": "^7.18.0",
+    "react-router": "^8.0.1",
     "restty": "^0.1.35",
     "tailwind-merge": "3.6.0",
     "ulidx": "2.4.1",
@@ -54,7 +53,7 @@
     "yaml": "2.9.0"
   },
   "devDependencies": {
-    "@react-router/dev": "^7.18.0",
+    "@react-router/dev": "^8.0.1",
     "@shopify/lang-jsonc": "^1.0.1",
     "@tailwindcss/vite": "^4.3.1",
     "@types/js-yaml": "^4.0.9",

react-router.config.ts

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

vite.config.ts

@@ -10,6 +10,7 @@ import { headplaneDevServer } from "./runtime/vite-plugin";
 
 const PROD_ENTRY = "./app/server/main.ts";
 const DEV_ENTRY = "./app/server/app.ts";
+const REACT_ROUTER_SSR_NO_EXTERNAL = ["@react-router/node", "react-router"];
 
 const PREFIX = process.env.__INTERNAL_PREFIX || "/admin";
 if (PREFIX.endsWith("/")) {
@@ -44,7 +45,10 @@ if (!VERSION) {
 const config = await readFile("config.example.yaml", "utf-8");
 const { server } = parse(config);
 
-export default defineConfig(({ command }) => ({
+export default defineConfig(({ command }) => {
+  const ssrNoExternal = command === "build" ? true : REACT_ROUTER_SSR_NO_EXTERNAL;
+
+  return {
     base: command === "build" ? `${PREFIX}/` : undefined,
     plugins: [
       headplaneDevServer({
@@ -79,6 +83,9 @@ export default defineConfig(({ command }) => ({
         },
       },
       ssr: {
+        resolve: {
+          noExternal: ssrNoExternal,
+        },
         build: {
           rollupOptions:
             command === "build"
@@ -96,10 +103,11 @@ export default defineConfig(({ command }) => ({
       },
     },
     ssr: {
-    noExternal: command === "build" ? true : undefined,
+      noExternal: ssrNoExternal,
     },
     define: {
       __VERSION__: JSON.stringify(isNext ? `${VERSION}-next` : VERSION),
       __PREFIX__: JSON.stringify(PREFIX),
     },
-}));
+  };
+});