@react-router/dev 7.2.0 → 7.3.0-pre.1

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.2.0
+ * @react-router/dev v7.3.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -117,27 +117,46 @@ function getVite() {
   return vite;
 }
 
+// vite/ssr-externals.ts
+var ssrExternals = isReactRouterRepo() ? [
+  // This is only needed within this repo because these packages
+  // are linked to a directory outside of node_modules so Vite
+  // treats them as internal code by default.
+  "react-router",
+  "react-router-dom",
+  "@react-router/architect",
+  "@react-router/cloudflare",
+  "@react-router/dev",
+  "@react-router/express",
+  "@react-router/node",
+  "@react-router/serve"
+] : void 0;
+
 // vite/vite-node.ts
-async function createContext(viteConfig = {}) {
+async function createContext({
+  root,
+  mode
+}) {
   await preloadVite();
   const vite2 = getVite();
-  const devServer = await vite2.createServer(
-    vite2.mergeConfig(
-      {
-        server: {
-          preTransformRequests: false,
-          hmr: false
-        },
-        optimizeDeps: {
-          noDiscovery: true
-        },
-        configFile: false,
-        envFile: false,
-        plugins: []
-      },
-      viteConfig
-    )
-  );
+  const devServer = await vite2.createServer({
+    root,
+    mode,
+    server: {
+      preTransformRequests: false,
+      hmr: false,
+      watch: null
+    },
+    ssr: {
+      external: ssrExternals
+    },
+    optimizeDeps: {
+      noDiscovery: true
+    },
+    configFile: false,
+    envFile: false,
+    plugins: []
+  });
   await devServer.pluginContainer.buildStart({});
   const server = new import_server.ViteNodeServer(devServer);
   (0, import_source_map.installSourcemapsSupport)({
@@ -453,6 +472,7 @@ async function resolveConfig({
     );
   }
   let future = {
+    unstable_middleware: reactRouterUserConfig.future?.unstable_middleware ?? false,
     unstable_optimizeDeps: reactRouterUserConfig.future?.unstable_optimizeDeps ?? false,
     unstable_splitRouteModules: reactRouterUserConfig.future?.unstable_splitRouteModules ?? false,
     unstable_viteEnvironmentApi: reactRouterUserConfig.future?.unstable_viteEnvironmentApi ?? false
@@ -482,11 +502,7 @@ async function createConfigLoader({
   root = root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
   let viteNodeContext = await createContext({
     root,
-    mode: watch2 ? "development" : "production",
-    server: !watch2 ? { watch: null } : {},
-    ssr: {
-      external: ssrExternals
-    }
+    mode: watch2 ? "development" : "production"
   });
   let reactRouterConfigFile = findEntry(root, "react-router.config", {
     absolute: true
@@ -610,19 +626,6 @@ async function resolveEntryFiles({
   let entryServerFilePath = userEntryServerFile ? import_pathe3.default.resolve(reactRouterConfig.appDirectory, userEntryServerFile) : import_pathe3.default.resolve(defaultsDirectory, entryServerFile);
   return { entryClientFilePath, entryServerFilePath };
 }
-var ssrExternals = isReactRouterRepo() ? [
-  // This is only needed within this repo because these packages
-  // are linked to a directory outside of node_modules so Vite
-  // treats them as internal code by default.
-  "react-router",
-  "react-router-dom",
-  "@react-router/architect",
-  "@react-router/cloudflare",
-  "@react-router/dev",
-  "@react-router/express",
-  "@react-router/node",
-  "@react-router/serve"
-] : void 0;
 var entryExts = [".js", ".jsx", ".ts", ".tsx"];
 function findEntry(dir, basename2, options) {
   for (let ext of entryExts) {
@@ -750,6 +753,8 @@ function generate2(ctx, route) {
       export type HeadersArgs = T.HeadersArgs
       export type HeadersFunction = (args: HeadersArgs) => Headers | HeadersInit
 
+      export type unstable_MiddlewareFunction = T.CreateServerMiddlewareFunction<Info>
+      export type unstable_ClientMiddlewareFunction = T.CreateClientMiddlewareFunction<Info>
       export type LoaderArgs = T.CreateServerLoaderArgs<Info>
       export type ClientLoaderArgs = T.CreateClientLoaderArgs<Info>
       export type ActionArgs = T.CreateServerActionArgs<Info>
@@ -832,12 +837,16 @@ function register(ctx) {
     }
   `;
   const { t: t2 } = babel_exports;
+  const indexPaths = new Set(
+    Object.values(ctx.config.routes).filter((route) => route.index).map((route) => route.path)
+  );
   const typeParams = t2.tsTypeAliasDeclaration(
     t2.identifier("Params"),
     null,
     t2.tsTypeLiteral(
       Object.values(ctx.config.routes).map((route) => {
         if (route.id !== "root" && !route.path) return void 0;
+        if (!route.index && indexPaths.has(route.path)) return void 0;
         const lineage2 = lineage(ctx.config.routes, route);
         const fullpath2 = fullpath(lineage2);
         const params = parse2(fullpath2);
@@ -867,7 +876,18 @@ var import_node_events = require("events");
 var import_node_stream = require("stream");
 var import_set_cookie_parser = require("set-cookie-parser");
 var import_node = require("@react-router/node");
-function fromNodeHeaders(nodeHeaders) {
+function fromNodeHeaders(nodeReq) {
+  let nodeHeaders = nodeReq.headers;
+  if (nodeReq.httpVersionMajor >= 2) {
+    nodeHeaders = { ...nodeHeaders };
+    if (nodeHeaders[":authority"]) {
+      nodeHeaders.host = nodeHeaders[":authority"];
+    }
+    delete nodeHeaders[":authority"];
+    delete nodeHeaders[":method"];
+    delete nodeHeaders[":path"];
+    delete nodeHeaders[":scheme"];
+  }
   let headers = new Headers();
   for (let [key, values] of Object.entries(nodeHeaders)) {
     if (values) {
@@ -892,7 +912,7 @@ function fromNodeRequest(nodeReq, nodeRes) {
   let controller = new AbortController();
   let init = {
     method: nodeReq.method,
-    headers: fromNodeHeaders(nodeReq.headers),
+    headers: fromNodeHeaders(nodeReq),
     signal: controller.signal
   };
   nodeRes.on("finish", () => controller = null);
@@ -963,15 +983,12 @@ var isCssUrlWithoutSideEffects = (url2) => {
   }
   return false;
 };
-var injectQuery = (url2, query) => url2.includes("?") ? url2.replace("?", `?${query}&`) : `${url2}?${query}`;
 var getStylesForFiles = async ({
   viteDevServer,
   rootDirectory,
-  cssModulesManifest,
+  loadCssContents,
   files
 }) => {
-  let vite2 = getVite();
-  let viteMajor = parseInt(vite2.version.split(".")[0], 10);
   let styles = {};
   let deps = /* @__PURE__ */ new Set();
   try {
@@ -1000,21 +1017,9 @@ var getStylesForFiles = async ({
   for (let dep of deps) {
     if (dep.file && isCssFile(dep.file) && !isCssUrlWithoutSideEffects(dep.url)) {
       try {
-        let css = isCssModulesFile(dep.file) ? cssModulesManifest[dep.file] : (await viteDevServer.ssrLoadModule(
-          // We need the ?inline query in Vite v6 when loading CSS in SSR
-          // since it does not expose the default export for CSS in a
-          // server environment. This is to align with non-SSR
-          // environments. For backwards compatibility with v5 we keep
-          // using the URL without ?inline query because the HMR code was
-          // relying on the implicit SSR-client module graph relationship.
-          viteMajor >= 6 ? injectQuery(dep.url, "inline") : dep.url
-        )).default;
-        if (css === void 0) {
-          throw new Error();
-        }
-        styles[dep.url] = css;
+        styles[dep.url] = await loadCssContents(viteDevServer, dep);
       } catch {
-        console.warn(`Could not load ${dep.file}`);
+        console.warn(`Failed to load CSS for ${dep.file}`);
       }
     }
   }
@@ -1062,33 +1067,41 @@ var groupRoutesByParentId = (manifest) => {
   });
   return routes;
 };
-var createRoutes = (manifest, parentId = "", routesByParentId = groupRoutesByParentId(manifest)) => {
+var createRoutesWithChildren = (manifest, parentId = "", routesByParentId = groupRoutesByParentId(manifest)) => {
   return (routesByParentId[parentId] || []).map((route) => ({
     ...route,
-    children: createRoutes(manifest, route.id, routesByParentId)
+    ...route.index ? {
+      index: true
+    } : {
+      index: false,
+      children: createRoutesWithChildren(
+        manifest,
+        route.id,
+        routesByParentId
+      )
+    }
   }));
 };
-var getStylesForUrl = async ({
+var getStylesForPathname = async ({
   viteDevServer,
   rootDirectory,
   reactRouterConfig,
   entryClientFilePath,
-  cssModulesManifest,
-  build,
-  url: url2
+  loadCssContents,
+  pathname
 }) => {
-  if (url2 === void 0 || url2.includes("?_data=")) {
+  if (pathname === void 0 || pathname.includes("?_data=")) {
     return void 0;
   }
-  let routes = createRoutes(build.routes);
+  let routesWithChildren = createRoutesWithChildren(reactRouterConfig.routes);
   let appPath = path5.relative(process.cwd(), reactRouterConfig.appDirectory);
-  let documentRouteFiles = (0, import_react_router.matchRoutes)(routes, url2, build.basename)?.map(
+  let documentRouteFiles = (0, import_react_router.matchRoutes)(routesWithChildren, pathname, reactRouterConfig.basename)?.map(
     (match) => path5.resolve(appPath, reactRouterConfig.routes[match.route.id].file)
   ) ?? [];
   let styles = await getStylesForFiles({
     viteDevServer,
     rootDirectory,
-    cssModulesManifest,
+    loadCssContents,
     files: [
       // Always include the client entry file when crawling the module graph for CSS
       path5.relative(rootDirectory, entryClientFilePath),
@@ -1952,33 +1965,47 @@ function toFunctionExpression(decl) {
 }
 
 // vite/plugin.ts
-var SERVER_ONLY_ROUTE_EXPORTS = ["loader", "action", "headers"];
-var CLIENT_ROUTE_EXPORTS = [
+function extractPluginContext(viteConfig) {
+  return viteConfig["__reactRouterPluginContext"];
+}
+var SERVER_ONLY_ROUTE_EXPORTS = [
+  "loader",
+  "action",
+  "unstable_middleware",
+  "headers"
+];
+var CLIENT_NON_COMPONENT_EXPORTS = [
   "clientAction",
   "clientLoader",
-  "default",
-  "ErrorBoundary",
+  "unstable_clientMiddleware",
   "handle",
-  "HydrateFallback",
-  "Layout",
-  "links",
   "meta",
+  "links",
   "shouldRevalidate"
 ];
+var CLIENT_ROUTE_EXPORTS = [
+  ...CLIENT_NON_COMPONENT_EXPORTS,
+  "default",
+  "ErrorBoundary",
+  "HydrateFallback",
+  "Layout"
+];
 var BUILD_CLIENT_ROUTE_QUERY_STRING = "?__react-router-build-client-route";
 var SSR_BUNDLE_PREFIX = "ssrBundle_";
+function isSsrBundleEnvironmentName(name) {
+  return name.startsWith(SSR_BUNDLE_PREFIX);
+}
+var CSS_DEV_HELPER_ENVIRONMENT_NAME = "__react_router_css_dev_helper__";
 function isSeverBundleEnvironmentName(name) {
   return name.startsWith(SSR_BUNDLE_PREFIX);
 }
-function getServerEnvironmentEntries(record, buildManifest) {
+function getServerEnvironmentEntries(ctx, record) {
   return Object.entries(record).filter(
-    ([name]) => buildManifest.serverBundles ? isSeverBundleEnvironmentName(name) : name === "ssr"
+    ([name]) => ctx.buildManifest?.serverBundles ? isSeverBundleEnvironmentName(name) : name === "ssr"
   );
 }
-function getServerEnvironmentValues(record, buildManifest) {
-  return getServerEnvironmentEntries(record, buildManifest).map(
-    ([, value]) => value
-  );
+function getServerEnvironmentValues(ctx, record) {
+  return getServerEnvironmentEntries(ctx, record).map(([, value]) => value);
 }
 var isRouteEntryModuleId = (id) => {
   return id.endsWith(BUILD_CLIENT_ROUTE_QUERY_STRING);
@@ -1986,6 +2013,23 @@ var isRouteEntryModuleId = (id) => {
 var isRouteVirtualModule = (id) => {
   return isRouteEntryModuleId(id) || isRouteChunkModuleId(id);
 };
+var isServerBuildVirtualModuleId = (id) => {
+  return id.split("?")[0] === virtual.serverBuild.id;
+};
+var getServerBuildFile = (viteManifest) => {
+  let serverBuildIds = Object.keys(viteManifest).filter(
+    isServerBuildVirtualModuleId
+  );
+  invariant(
+    serverBuildIds.length <= 1,
+    "Multiple server build files found in manifest"
+  );
+  invariant(
+    serverBuildIds.length === 1,
+    "Server build file not found in manifest"
+  );
+  return viteManifest[serverBuildIds[0]].file;
+};
 var virtualHmrRuntime = create("hmr-runtime");
 var virtualInjectHmrRuntime = create("inject-hmr-runtime");
 var normalizeRelativeFilePath = (file, reactRouterConfig) => {
@@ -2152,12 +2196,30 @@ var resolveEnvironmentBuildContext = ({
   };
   return resolvedBuildContext;
 };
-var getServerBuildDirectory = (ctx, { serverBundleId } = {}) => path6.join(
-  ctx.reactRouterConfig.buildDirectory,
+var getServerBuildDirectory = (reactRouterConfig, { serverBundleId } = {}) => path6.join(
+  reactRouterConfig.buildDirectory,
   "server",
   ...serverBundleId ? [serverBundleId] : []
 );
 var getClientBuildDirectory = (reactRouterConfig) => path6.join(reactRouterConfig.buildDirectory, "client");
+var getServerBundleRouteIds = (vitePluginContext, ctx) => {
+  if (!ctx.buildManifest) {
+    return void 0;
+  }
+  let environmentName = ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? vitePluginContext.environment.name : ctx.environmentBuildContext?.name;
+  if (!environmentName || !isSsrBundleEnvironmentName(environmentName)) {
+    return void 0;
+  }
+  let serverBundleId = environmentName.replace(SSR_BUNDLE_PREFIX, "");
+  let routesByServerBundleId = getRoutesByServerBundleId(ctx.buildManifest);
+  let serverBundleRoutes = routesByServerBundleId[serverBundleId];
+  invariant(
+    serverBundleRoutes,
+    `Routes not found for server bundle "${serverBundleId}"`
+  );
+  return Object.keys(serverBundleRoutes);
+};
+var injectQuery = (url2, query) => url2.includes("?") ? url2.replace("?", `?${query}&`) : `${url2}?${query}`;
 var defaultEntriesDir = path6.resolve(
   path6.dirname(require.resolve("@react-router/dev/package.json")),
   "dist",
@@ -2166,14 +2228,13 @@ var defaultEntriesDir = path6.resolve(
 );
 var defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename3) => path6.join(defaultEntriesDir, filename3));
 invariant(defaultEntries.length > 0, "No default entries found");
-var reactRouterDevLoadContext = () => ({});
+var reactRouterDevLoadContext = () => void 0;
 var reactRouterVitePlugin = () => {
   let rootDirectory;
   let viteCommand;
   let viteUserConfig;
   let viteConfigEnv;
   let viteConfig;
-  let buildManifest;
   let cssModulesManifest = {};
   let viteChildCompiler = null;
   let cache = /* @__PURE__ */ new Map();
@@ -2194,6 +2255,7 @@ var reactRouterVitePlugin = () => {
       }
       return;
     }
+    let injectedPluginContext = !reactRouterConfig.future.unstable_viteEnvironmentApi && viteCommand === "build" ? extractPluginContext(viteUserConfig) : void 0;
     let { entryClientFilePath, entryServerFilePath } = await resolveEntryFiles({
       rootDirectory,
       reactRouterConfig
@@ -2208,6 +2270,7 @@ var reactRouterVitePlugin = () => {
       process.exit(1);
     }
     let viteManifestEnabled = viteUserConfig.build?.manifest === true;
+    let buildManifest = viteCommand === "build" ? injectedPluginContext?.buildManifest ?? await getBuildManifest({ reactRouterConfig, rootDirectory }) : null;
     let environmentBuildContext = viteCommand === "build" ? resolveEnvironmentBuildContext({ viteCommand, viteUserConfig }) : null;
     firstLoad = false;
     ctx = {
@@ -2217,7 +2280,8 @@ var reactRouterVitePlugin = () => {
       entryClientFilePath,
       entryServerFilePath,
       publicPath,
-      viteManifestEnabled
+      viteManifestEnabled,
+      buildManifest
     };
   };
   let pluginIndex = (pluginName) => {
@@ -2239,21 +2303,26 @@ var reactRouterVitePlugin = () => {
       ctx.reactRouterConfig.ssr,
       routes
     );
+    let isSpaMode = isSpaModeEnabled(ctx.reactRouterConfig);
     return `
     import * as entryServer from ${JSON.stringify(
       resolveFileUrl(ctx, ctx.entryServerFilePath)
     )};
     ${Object.keys(routes).map((key, index) => {
       let route = routes[key];
-      return `import * as route${index} from ${JSON.stringify(
-        resolveFileUrl(
-          ctx,
-          resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)
-        )
-      )};`;
+      if (isSpaMode && key !== "root") {
+        return `const route${index} = { default: () => null };`;
+      } else {
+        return `import * as route${index} from ${JSON.stringify(
+          resolveFileUrl(
+            ctx,
+            resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)
+          )
+        )};`;
+      }
     }).join("\n")}
       export { default as assets } from ${JSON.stringify(
-      `${virtual.serverManifest.id}${routeIds ? `?route-ids=${routeIds.join(",")}` : ""}`
+      virtual.serverManifest.id
     )};
       export const assetsBuildDirectory = ${JSON.stringify(
       path6.relative(
@@ -2264,7 +2333,7 @@ var reactRouterVitePlugin = () => {
       export const basename = ${JSON.stringify(ctx.reactRouterConfig.basename)};
       export const future = ${JSON.stringify(ctx.reactRouterConfig.future)};
       export const ssr = ${ctx.reactRouterConfig.ssr};
-      export const isSpaMode = ${isSpaModeEnabled(ctx.reactRouterConfig)};
+      export const isSpaMode = ${isSpaMode};
       export const prerender = ${JSON.stringify(prerenderPaths)};
       export const publicPath = ${JSON.stringify(ctx.publicPath)};
       export const entry = { module: entryServer };
@@ -2280,7 +2349,15 @@ var reactRouterVitePlugin = () => {
           module: route${index}
         }`;
     }).join(",\n  ")}
-      };`;
+      };
+      ${ctx.reactRouterConfig.future.unstable_viteEnvironmentApi && viteCommand === "serve" ? `
+              export const getCriticalCss = ({ pathname }) => {
+                return {
+                  rel: "stylesheet",
+                  href: "${viteUserConfig.base ?? "/"}@react-router/critical.css?pathname=" + pathname,
+                };
+              }
+            ` : ""}`;
   };
   let loadViteManifest = async (directory) => {
     let manifestContents = await fse.readFile(
@@ -2414,6 +2491,7 @@ var reactRouterVitePlugin = () => {
       reactRouterServerManifest
     };
   };
+  let currentReactRouterManifestForDev = null;
   let getReactRouterManifestForDev = async () => {
     let routes = {};
     let routeManifestExports = await getRouteManifestModuleExports(
@@ -2470,7 +2548,7 @@ var reactRouterVitePlugin = () => {
         imports: []
       };
     }
-    return {
+    let reactRouterManifestForDev = {
       version: String(Math.random()),
       url: combineURLs(ctx.publicPath, virtual.browserManifest.url),
       hmr: {
@@ -2485,6 +2563,42 @@ var reactRouterVitePlugin = () => {
       },
       routes
     };
+    currentReactRouterManifestForDev = reactRouterManifestForDev;
+    return reactRouterManifestForDev;
+  };
+  const loadCssContents = async (viteDevServer, dep) => {
+    invariant(
+      viteCommand === "serve",
+      "loadCssContents is only available in dev mode"
+    );
+    if (dep.file && isCssModulesFile(dep.file)) {
+      return cssModulesManifest[dep.file];
+    }
+    const vite2 = getVite();
+    const viteMajor = parseInt(vite2.version.split(".")[0], 10);
+    const url2 = viteMajor >= 6 ? (
+      // We need the ?inline query in Vite v6 when loading CSS in SSR
+      // since it does not expose the default export for CSS in a
+      // server environment. This is to align with non-SSR
+      // environments. For backwards compatibility with v5 we keep
+      // using the URL without ?inline query because the HMR code was
+      // relying on the implicit SSR-client module graph relationship.
+      injectQuery(dep.url, "inline")
+    ) : dep.url;
+    let cssMod;
+    if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) {
+      const cssDevHelperEnvironment = viteDevServer.environments[CSS_DEV_HELPER_ENVIRONMENT_NAME];
+      invariant(cssDevHelperEnvironment, "Missing CSS dev helper environment");
+      invariant(vite2.isRunnableDevEnvironment(cssDevHelperEnvironment));
+      cssMod = await cssDevHelperEnvironment.runner.import(url2);
+    } else {
+      cssMod = await viteDevServer.ssrLoadModule(url2);
+    }
+    invariant(
+      typeof cssMod === "object" && cssMod !== null && "default" in cssMod && typeof cssMod.default === "string",
+      `Failed to load CSS for ${dep.file ?? dep.url}`
+    );
+    return cssMod.default;
   };
   return [
     {
@@ -2513,7 +2627,6 @@ var reactRouterVitePlugin = () => {
           watch: viteCommand === "serve"
         });
         await updatePluginContext();
-        buildManifest = await getBuildManifest(ctx);
         Object.assign(
           process.env,
           vite2.loadEnv(
@@ -2525,15 +2638,12 @@ var reactRouterVitePlugin = () => {
             ""
           )
         );
-        let environments = await getEnvironmentsOptions(
-          ctx,
-          buildManifest,
-          viteCommand,
-          { viteUserConfig }
-        );
+        let environments = await getEnvironmentsOptions(ctx, viteCommand, {
+          viteUserConfig
+        });
         let serverEnvironment = getServerEnvironmentValues(
-          environments,
-          buildManifest
+          ctx,
+          environments
         )[0];
         invariant(serverEnvironment);
         let clientEnvironment = environments.client;
@@ -2604,7 +2714,6 @@ var reactRouterVitePlugin = () => {
               sharedPlugins: true,
               async buildApp(builder) {
                 invariant(viteConfig);
-                invariant(buildManifest);
                 viteConfig.logger.info(
                   "Using Vite Environment API (experimental)"
                 );
@@ -2612,11 +2721,13 @@ var reactRouterVitePlugin = () => {
                 await cleanBuildDirectory(viteConfig, ctx);
                 await builder.build(builder.environments.client);
                 let serverEnvironments = getServerEnvironmentValues(
-                  builder.environments,
-                  buildManifest
+                  ctx,
+                  builder.environments
                 );
                 await Promise.all(serverEnvironments.map(builder.build));
                 await cleanViteManifests(environments, ctx);
+                let { buildManifest } = ctx;
+                invariant(buildManifest, "Expected build manifest");
                 await reactRouterConfig.buildEnd?.({
                   buildManifest,
                   reactRouterConfig,
@@ -2663,6 +2774,8 @@ var reactRouterVitePlugin = () => {
         }
         viteChildCompiler = await vite2.createServer({
           ...viteUserConfig,
+          // Ensure child compiler cannot overwrite the default cache directory
+          cacheDir: "node_modules/.vite-child-compiler",
           mode: viteConfig.mode,
           server: {
             watch: viteConfig.command === "build" ? null : void 0,
@@ -2674,7 +2787,23 @@ var reactRouterVitePlugin = () => {
           plugins: [
             ...(childCompilerConfigFile.config.plugins ?? []).flat().filter(
               (plugin2) => typeof plugin2 === "object" && plugin2 !== null && "name" in plugin2 && plugin2.name !== "react-router" && plugin2.name !== "react-router:route-exports" && plugin2.name !== "react-router:hmr-updates"
-            )
+            ),
+            {
+              name: "react-router:override-optimize-deps",
+              config(userConfig) {
+                if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi && userConfig.environments) {
+                  for (const environmentName of Object.keys(
+                    userConfig.environments
+                  )) {
+                    userConfig.environments[environmentName].optimizeDeps = {
+                      noDiscovery: true
+                    };
+                  }
+                } else {
+                  userConfig.optimizeDeps = { noDiscovery: true };
+                }
+              }
+            }
           ]
         });
         await viteChildCompiler.pluginContainer.buildStart({});
@@ -2705,15 +2834,14 @@ var reactRouterVitePlugin = () => {
         (0, import_react_router2.unstable_setDevServerHooks)({
           // Give the request handler access to the critical CSS in dev to avoid a
           // flash of unstyled content since Vite injects CSS file contents via JS
-          getCriticalCss: async (build, url2) => {
-            return getStylesForUrl({
+          getCriticalCss: async (pathname) => {
+            return getStylesForPathname({
               rootDirectory: ctx.rootDirectory,
               entryClientFilePath: ctx.entryClientFilePath,
               reactRouterConfig: ctx.reactRouterConfig,
               viteDevServer,
-              cssModulesManifest,
-              build,
-              url: url2
+              loadCssContents,
+              pathname
             });
           },
           // If an error is caught within the request handler, let Vite fix the
@@ -2756,13 +2884,48 @@ var reactRouterVitePlugin = () => {
             }
           }
         );
+        if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) {
+          viteDevServer.middlewares.use(async (req, res, next) => {
+            let [reqPathname, reqSearch] = (req.url ?? "").split("?");
+            if (reqPathname === "/@react-router/critical.css") {
+              let pathname = new URLSearchParams(reqSearch).get("pathname");
+              if (!pathname) {
+                return next("No pathname provided");
+              }
+              let css = await getStylesForPathname({
+                rootDirectory: ctx.rootDirectory,
+                entryClientFilePath: ctx.entryClientFilePath,
+                reactRouterConfig: ctx.reactRouterConfig,
+                viteDevServer,
+                loadCssContents,
+                pathname
+              });
+              res.setHeader("Content-Type", "text/css");
+              res.end(css);
+            } else {
+              next();
+            }
+          });
+        }
         return () => {
           if (!viteDevServer.config.server.middlewareMode) {
             viteDevServer.middlewares.use(async (req, res, next) => {
               try {
-                let build = await viteDevServer.ssrLoadModule(
-                  virtual.serverBuild.id
-                );
+                let build;
+                if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) {
+                  let vite2 = getVite();
+                  let ssrEnvironment = viteDevServer.environments.ssr;
+                  if (!vite2.isRunnableDevEnvironment(ssrEnvironment)) {
+                    return;
+                  }
+                  build = await ssrEnvironment.runner.import(
+                    virtual.serverBuild.id
+                  );
+                } else {
+                  build = await viteDevServer.ssrLoadModule(
+                    virtual.serverBuild.id
+                  );
+                }
                 let handler = (0, import_react_router2.createRequestHandler)(build, "development");
                 let nodeHandler = async (nodeReq, nodeRes) => {
                   let req2 = fromNodeRequest(nodeReq, nodeRes);
@@ -2792,7 +2955,7 @@ var reactRouterVitePlugin = () => {
           let clientBuildDirectory = getClientBuildDirectory(
             ctx.reactRouterConfig
           );
-          let serverBuildDirectory = future.unstable_viteEnvironmentApi ? this.environment.config?.build?.outDir : ctx.environmentBuildContext?.options.build?.outDir ?? getServerBuildDirectory(ctx);
+          let serverBuildDirectory = future.unstable_viteEnvironmentApi ? this.environment.config?.build?.outDir : ctx.environmentBuildContext?.options.build?.outDir ?? getServerBuildDirectory(ctx.reactRouterConfig);
           let ssrViteManifest = await loadViteManifest(serverBuildDirectory);
           let ssrAssetPaths = getViteManifestAssetPaths(ssrViteManifest);
           let movedAssetPaths = [];
@@ -2831,7 +2994,7 @@ var reactRouterVitePlugin = () => {
               viteConfig,
               ctx.reactRouterConfig,
               serverBuildDirectory,
-              ssrViteManifest[virtual.serverBuild.id].file,
+              getServerBuildFile(ssrViteManifest),
               clientBuildDirectory
             );
           }
@@ -2840,7 +3003,7 @@ var reactRouterVitePlugin = () => {
               viteConfig,
               ctx.reactRouterConfig,
               serverBuildDirectory,
-              ssrViteManifest[virtual.serverBuild.id].file,
+              getServerBuildFile(ssrViteManifest),
               clientBuildDirectory
             );
           }
@@ -2981,22 +3144,17 @@ var reactRouterVitePlugin = () => {
       name: "react-router:virtual-modules",
       enforce: "pre",
       resolveId(id) {
-        let [baseId, queryString] = id.split("?");
-        const vmod2 = Object.values(virtual).find((vmod3) => vmod3.id === baseId);
-        if (vmod2)
-          return vmod2.resolvedId + (queryString ? `?${queryString}` : "");
+        const vmod2 = Object.values(virtual).find((vmod3) => vmod3.id === id);
+        if (vmod2) return vmod2.resolvedId;
       },
       async load(id) {
-        let [baseId, queryString] = id.split("?");
-        switch (baseId) {
+        switch (id) {
           case virtual.serverBuild.resolvedId: {
-            let searchParams = new URLSearchParams(queryString);
-            let routeIds = searchParams.get("route-ids")?.split(",") || void 0;
+            let routeIds = getServerBundleRouteIds(this, ctx);
             return await getServerEntry({ routeIds });
           }
           case virtual.serverManifest.resolvedId: {
-            let searchParams = new URLSearchParams(queryString);
-            let routeIds = searchParams.get("route-ids")?.split(",") || void 0;
+            let routeIds = getServerBundleRouteIds(this, ctx);
             let reactRouterManifest = viteCommand === "build" ? (await generateReactRouterManifestsForBuild({
               routeIds
             })).reactRouterServerManifest : await getReactRouterManifestForDev();
@@ -3231,8 +3389,7 @@ var reactRouterVitePlugin = () => {
         let route = getRoute(ctx.reactRouterConfig, file);
         let hmrEventData = { route: null };
         if (route) {
-          let serverManifest = (await server.ssrLoadModule(virtual.serverManifest.id)).default;
-          let oldRouteMetadata = serverManifest.routes[route.id];
+          let oldRouteMetadata = currentReactRouterManifestForDev?.routes[route.id];
           let newRouteMetadata = await getRouteMetadata(
             cache,
             ctx,
@@ -3312,14 +3469,7 @@ function uniqueNodes(nodes) {
 }
 function addRefreshWrapper(reactRouterConfig, code, id) {
   let route = getRoute(reactRouterConfig, id);
-  let acceptExports = route ? [
-    "clientAction",
-    "clientLoader",
-    "handle",
-    "meta",
-    "links",
-    "shouldRevalidate"
-  ] : [];
+  let acceptExports = route ? CLIENT_NON_COMPONENT_EXPORTS : [];
   return REACT_REFRESH_HEADER.replaceAll("__SOURCE__", JSON.stringify(id)) + code + REACT_REFRESH_FOOTER.replaceAll("__SOURCE__", JSON.stringify(id)).replaceAll("__ACCEPT_EXPORTS__", JSON.stringify(acceptExports)).replaceAll("__ROUTE_ID__", JSON.stringify(route?.id));
 }
 var REACT_REFRESH_HEADER = `
@@ -3484,18 +3634,26 @@ async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirecto
     serverBuildDirectory,
     serverBuildPath
   );
-  let routes = createPrerenderRoutes(build.routes);
+  let routes = createPrerenderRoutes(reactRouterConfig.routes);
+  for (let path7 of build.prerender) {
+    let matches = (0, import_react_router2.matchRoutes)(routes, `/${path7}/`.replace(/^\/\/+/, "/"));
+    if (!matches) {
+      throw new Error(
+        `Unable to prerender path because it does not match any routes: ${path7}`
+      );
+    }
+  }
+  let buildRoutes = createPrerenderRoutes(build.routes);
   let headers = {
     // Header that can be used in the loader to know if you're running at
     // build time or runtime
     "X-React-Router-Prerender": "yes"
   };
   for (let path7 of build.prerender) {
-    let matches = (0, import_react_router2.matchRoutes)(routes, `/${path7}/`.replace(/^\/\/+/, "/"));
-    invariant(
-      matches,
-      `Unable to prerender path because it does not match any routes: ${path7}`
-    );
+    let matches = (0, import_react_router2.matchRoutes)(buildRoutes, `/${path7}/`.replace(/^\/\/+/, "/"));
+    if (!matches) {
+      continue;
+    }
     let leafRoute = matches ? matches[matches.length - 1].route : null;
     let manifestRoute = leafRoute ? build.routes[leafRoute.id]?.module : null;
     let isResourceRoute = manifestRoute && !manifestRoute.default && !manifestRoute.ErrorBoundary;
@@ -3798,8 +3956,8 @@ function getRouteBranch(routes, routeId) {
   }
   return branch.reverse();
 }
-function hasServerBundles(buildManifest) {
-  return Object.keys(buildManifest.serverBundles ?? {}).length > 0;
+function getServerBundleIds(ctx) {
+  return ctx.buildManifest?.serverBundles ? Object.keys(ctx.buildManifest.serverBundles) : void 0;
 }
 function getRoutesByServerBundleId(buildManifest) {
   if (!buildManifest.routeIdToServerBundleId) {
@@ -3914,19 +4072,22 @@ async function cleanViteManifests(environmentsOptions, ctx) {
     })
   );
 }
-async function getBuildManifest(ctx) {
-  let { routes, serverBundles, appDirectory } = ctx.reactRouterConfig;
+async function getBuildManifest({
+  reactRouterConfig,
+  rootDirectory
+}) {
+  let { routes, serverBundles, appDirectory } = reactRouterConfig;
   if (!serverBundles) {
     return { routes };
   }
   let { normalizePath } = await import("vite");
-  let serverBuildDirectory = getServerBuildDirectory(ctx);
-  let resolvedAppDirectory = path6.resolve(ctx.rootDirectory, appDirectory);
+  let serverBuildDirectory = getServerBuildDirectory(reactRouterConfig);
+  let resolvedAppDirectory = path6.resolve(rootDirectory, appDirectory);
   let rootRelativeRoutes = Object.fromEntries(
     Object.entries(routes).map(([id, route]) => {
       let filePath = path6.join(resolvedAppDirectory, route.file);
       let rootRelativeFilePath = normalizePath(
-        path6.relative(ctx.rootDirectory, filePath)
+        path6.relative(rootDirectory, filePath)
       );
       return [id, { ...route, file: rootRelativeFilePath }];
     })
@@ -3951,10 +4112,18 @@ async function getBuildManifest(ctx) {
       if (typeof serverBundleId !== "string") {
         throw new Error(`The "serverBundles" function must return a string`);
       }
-      if (!/^[a-zA-Z0-9-_]+$/.test(serverBundleId)) {
-        throw new Error(
-          `The "serverBundles" function must only return strings containing alphanumeric characters, hyphens and underscores.`
-        );
+      if (reactRouterConfig.future.unstable_viteEnvironmentApi) {
+        if (!/^[a-zA-Z0-9_]+$/.test(serverBundleId)) {
+          throw new Error(
+            `The "serverBundles" function must only return strings containing alphanumeric characters and underscores.`
+          );
+        }
+      } else {
+        if (!/^[a-zA-Z0-9-_]+$/.test(serverBundleId)) {
+          throw new Error(
+            `The "serverBundles" function must only return strings containing alphanumeric characters, hyphens and underscores.`
+          );
+        }
       }
       buildManifest.routeIdToServerBundleId[route.id] = serverBundleId;
       buildManifest.serverBundles[serverBundleId] ??= {
@@ -3962,10 +4131,10 @@ async function getBuildManifest(ctx) {
         file: normalizePath(
           path6.join(
             path6.relative(
-              ctx.rootDirectory,
+              rootDirectory,
               path6.join(serverBuildDirectory, serverBundleId)
             ),
-            ctx.reactRouterConfig.serverBuildFile
+            reactRouterConfig.serverBuildFile
           )
         )
       };
@@ -3980,7 +4149,7 @@ function mergeEnvironmentOptions(base, ...overrides) {
     base
   );
 }
-async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
+async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
   let { serverBuildFile, serverModuleFormat } = ctx.reactRouterConfig;
   let packageRoot = path6.dirname(
     require.resolve("@react-router/dev/package.json")
@@ -4024,7 +4193,15 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
     let conditions = viteCommand === "build" ? viteServerConditions : ["development", ...viteServerConditions];
     return mergeEnvironmentOptions(getBaseOptions({ viteUserConfig }), {
       resolve: {
-        external: ssrExternals,
+        external: (
+          // This check is required to honor the "noExternal: true" config
+          // provided by vite-plugin-cloudflare within this repo. When compiling
+          // for Cloudflare, all server dependencies are externalized, but our
+          // `ssrExternals` config inadvertently overrides this. This doesn't
+          // impact consumers because for them `ssrExternals` is undefined and
+          // Cloudflare's "noExternal: true" config remains intact.
+          ctx.reactRouterConfig.future.unstable_viteEnvironmentApi && viteUserConfig.environments?.ssr?.resolve?.noExternal === true ? void 0 : ssrExternals
+        ),
         conditions,
         externalConditions: conditions
       },
@@ -4038,6 +4215,7 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
         copyPublicDir: false,
         // Assets in the public directory are only used by the client
         rollupOptions: {
+          input: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig.environments?.ssr?.build?.rollupOptions?.input : viteUserConfig.build?.rollupOptions?.input) ?? virtual.serverBuild.id,
           output: {
             entryFileNames: serverBuildFile,
             format: serverModuleFormat
@@ -4069,12 +4247,15 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
               }
             )
           ],
-          output: {
-            entryFileNames({ moduleIds }) {
+          output: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig?.environments?.client?.build?.rollupOptions?.output : viteUserConfig?.build?.rollupOptions?.output) ?? {
+            entryFileNames: ({ moduleIds }) => {
               let routeChunkModuleId = moduleIds.find(isRouteChunkModuleId);
               let routeChunkName = routeChunkModuleId ? getRouteChunkNameFromModuleId(routeChunkModuleId) : null;
               let routeChunkSuffix = routeChunkName ? `-${(0, import_kebabCase.default)(routeChunkName)}` : "";
-              return `assets/[name]${routeChunkSuffix}-[hash].js`;
+              return path6.posix.join(
+                (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig?.environments?.client?.build?.assetsDir : viteUserConfig?.build?.assetsDir) ?? "assets",
+                `[name]${routeChunkSuffix}-[hash].js`
+              );
             }
           }
         },
@@ -4082,22 +4263,17 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
       }
     })
   };
-  if (hasServerBundles(buildManifest)) {
-    for (let [serverBundleId, routes] of Object.entries(
-      getRoutesByServerBundleId(buildManifest)
-    )) {
-      const serverBundleEnvironmentId = serverBundleId.replaceAll("-", "_");
-      const environmentName = `${SSR_BUNDLE_PREFIX}${serverBundleEnvironmentId}`;
+  let serverBundleIds = getServerBundleIds(ctx);
+  if (serverBundleIds) {
+    for (let serverBundleId of serverBundleIds) {
+      const environmentName = `${SSR_BUNDLE_PREFIX}${serverBundleId}`;
       environmentOptionsResolvers[environmentName] = ({ viteUserConfig }) => mergeEnvironmentOptions(
         getBaseServerOptions({ viteUserConfig }),
         {
           build: {
-            outDir: getServerBuildDirectory(ctx, { serverBundleId }),
-            rollupOptions: {
-              input: `${virtual.serverBuild.id}?route-ids=${Object.keys(
-                routes
-              ).join(",")}`
-            }
+            outDir: getServerBuildDirectory(ctx.reactRouterConfig, {
+              serverBundleId
+            })
           }
         },
         // Ensure server bundle environments extend the user's SSR
@@ -4108,13 +4284,27 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
   } else {
     environmentOptionsResolvers.ssr = ({ viteUserConfig }) => mergeEnvironmentOptions(getBaseServerOptions({ viteUserConfig }), {
       build: {
-        outDir: getServerBuildDirectory(ctx),
-        rollupOptions: {
-          input: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig.environments?.ssr?.build?.rollupOptions?.input : viteUserConfig.build?.rollupOptions?.input) ?? virtual.serverBuild.id
-        }
-      }
+        outDir: getServerBuildDirectory(ctx.reactRouterConfig)
+      },
+      optimizeDeps: ctx.reactRouterConfig.future.unstable_viteEnvironmentApi && viteUserConfig.environments?.ssr?.optimizeDeps?.noDiscovery === false ? {
+        entries: [
+          vite2.normalizePath(ctx.entryServerFilePath),
+          ...Object.values(ctx.reactRouterConfig.routes).map(
+            (route) => resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)
+          )
+        ],
+        include: [
+          "react",
+          "react/jsx-dev-runtime",
+          "react-dom/server",
+          "react-router"
+        ]
+      } : void 0
     });
   }
+  if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi && viteCommand === "serve") {
+    environmentOptionsResolvers[CSS_DEV_HELPER_ENVIRONMENT_NAME] = () => ({});
+  }
   return environmentOptionsResolvers;
 }
 function resolveEnvironmentsOptions(environmentResolvers, resolverOptions) {
@@ -4126,10 +4316,9 @@ function resolveEnvironmentsOptions(environmentResolvers, resolverOptions) {
   }
   return environmentOptions;
 }
-async function getEnvironmentsOptions(ctx, buildManifest, viteCommand, resolverOptions) {
+async function getEnvironmentsOptions(ctx, viteCommand, resolverOptions) {
   let environmentOptionsResolvers = await getEnvironmentOptionsResolvers(
     ctx,
-    buildManifest,
     viteCommand
   );
   return resolveEnvironmentsOptions(