@react-router/dev 0.0.0-experimental-8e9d8ef63 → 0.0.0-experimental-8677247c0

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # `@react-router/dev`
 
+## 7.2.0
+
+### Minor Changes
+
+- Generate a "SPA fallback" HTML file for scenarios where applications are prerendering the `/` route with `ssr:false` ([#12948](https://github.com/remix-run/react-router/pull/12948))
+
+  - If you specify `ssr:false` without a `prerender` config, this is considered "SPA Mode" and the generated `index.html` file will only render down to the root route and will be able to hydrate for any valid application path
+  - If you specify `ssr:false` with a `prerender` config but _do not_ include the `/` path (i.e., `prerender: ['/blog/post']`), then we still generate a "SPA Mode" `index.html` file that can hydrate for any path in the application
+  - However, previously if you specified `ssr:false` and included the `/` path in your `prerender` config, we would prerender the `/` route into `index.html` as a non-SPA page
+    - The generated HTML would include the root index route which prevented hydration for any other paths
+    - With this change, we now generate a "SPA Mode" file in `__spa-fallback.html` that will allow you to hydrate for any non-prerendered paths
+    - You can serve this file from your static file server for any paths that would otherwise 404 if you only want to pre-render _some_ routes in your `ssr:false` app and serve the others as a SPA
+    - `npx sirv-cli build/client --single __spa-fallback.html`
+
+- Allow a `loader` in the root route in SPA mode because it can be called/server-rendered at build time ([#12948](https://github.com/remix-run/react-router/pull/12948))
+
+  - `Route.HydrateFallbackProps` now also receives `loaderData`
+    - This will be defined so long as the `HydrateFallback` is rendering while _children_ routes are loading
+    - This will be `undefined` if the `HydrateFallback` is rendering because the route has it's own hydrating `clientLoader`
+    - In SPA mode, this will allow you to render loader root data into the SPA `index.html`
+
+- New type-safe `href` utility that guarantees links point to actual paths in your app ([#13012](https://github.com/remix-run/react-router/pull/13012))
+
+  ```tsx
+  import { href } from "react-router";
+
+  export default function Component() {
+    const link = href("/blog/:slug", { slug: "my-first-post" });
+    return (
+      <main>
+        <Link to={href("/products/:id", { id: "asdf" })} />
+        <NavLink to={href("/:lang?/about", { lang: "en" })} />
+      </main>
+    );
+  }
+  ```
+
+### Patch Changes
+
+- Handle custom `envDir` in Vite config ([#12969](https://github.com/remix-run/react-router/pull/12969))
+
+- Fix typegen for repeated params ([#13012](https://github.com/remix-run/react-router/pull/13012))
+
+  In React Router, path parameters are keyed by their name.
+  So for a path pattern like `/a/:id/b/:id?/c/:id`, the last `:id` will set the value for `id` in `useParams` and the `params` prop.
+  For example, `/a/1/b/2/c/3` will result in the value `{ id: 3 }` at runtime.
+
+  Previously, generated types for params incorrectly modeled repeated params with an array.
+  So `/a/1/b/2/c/3` generated a type like `{ id: [1,2,3] }`.
+
+  To be consistent with runtime behavior, the generated types now correctly model the "last one wins" semantics of path parameters.
+  So `/a/1/b/2/c/3` now generates a type like `{ id: 3 }`.
+
+- Fix CLI parsing to allow argumentless `npx react-router` usage ([#12925](https://github.com/remix-run/react-router/pull/12925))
+
+- Fix `ArgError: unknown or unexpected option: --version` when running `react-router --version` ([#13012](https://github.com/remix-run/react-router/pull/13012))
+
+- Skip action-only resource routes when using `prerender:true` ([#13004](https://github.com/remix-run/react-router/pull/13004))
+
+- Enhance invalid export detection when using `ssr:false` ([#12948](https://github.com/remix-run/react-router/pull/12948))
+
+  - `headers`/`action` are prohibited in all routes with `ssr:false` because there will be no runtime server on which to run them
+  - `loader` functions are more nuanced and depend on whether a given route is prerendered
+    - When using `ssr:false` without a `prerender` config, only the `root` route can have a `loader`
+      - This is "SPA mode" which generates a single `index.html` file with the root route `HydrateFallback` so it is capable of hydrating for any path in your application - therefore we can only call a root route `loader` at build time
+    - When using `ssr:false` with a `prerender` config, you can export a `loader` from routes matched by one of the `prerender` paths because those routes will be server rendered at build time
+      - Exporting a `loader` from a route that is never matched by a `prerender` path will throw a build time error because there will be no runtime server to ever run the loader
+
+- Limit prerendered resource route `.data` files to only the target route ([#13004](https://github.com/remix-run/react-router/pull/13004))
+
+- Add unstable support for splitting route modules in framework mode via `future.unstable_splitRouteModules` ([#11871](https://github.com/remix-run/react-router/pull/11871))
+
+- Fix prerendering of binary files ([#13039](https://github.com/remix-run/react-router/pull/13039))
+
+- Add `future.unstable_viteEnvironmentApi` flag to enable experimental Vite Environment API support ([#12936](https://github.com/remix-run/react-router/pull/12936))
+
+- Disable Lazy Route Discovery for all `ssr:false` apps and not just "SPA Mode" because there is no runtime server to serve the search-param-configured `__manifest` requests ([#12894](https://github.com/remix-run/react-router/pull/12894))
+
+  - We previously only disabled this for "SPA Mode" which is `ssr:false` and no `prerender` config but we realized it should apply to all `ssr:false` apps, including those prerendering multiple pages
+  - In those `prerender` scenarios we would prerender the `/__manifest` file assuming the static file server would serve it but that makes some unneccesary assumptions about the static file server behaviors
+
+- Updated dependencies:
+  - `react-router@7.2.0`
+  - `@react-router/node@7.2.0`
+  - `@react-router/serve@7.2.0`
+
 ## 7.1.5
 
 ### Patch Changes

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v0.0.0-experimental-8e9d8ef63
+ * @react-router/dev v0.0.0-experimental-8677247c0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -944,7 +944,6 @@ var init_styles = __esm({
     path6 = __toESM(require("path"));
     import_react_router = require("react-router");
     init_resolve_file_url();
-    init_vite();
     cssFileRegExp = /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\?)/;
     cssModulesRegExp = new RegExp(`\\.module${cssFileRegExp.source}`);
   }
@@ -1361,11 +1360,28 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
       build: {
         outDir: getServerBuildDirectory(ctx),
         rollupOptions: {
-          input: viteUserConfig.build?.rollupOptions?.input ?? virtual.serverBuild.id
+          input: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig.environments?.ssr?.build?.rollupOptions?.input : viteUserConfig.build?.rollupOptions?.input) ?? virtual.serverBuild.id
         }
-      }
+      },
+      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) {
@@ -1380,7 +1396,7 @@ function resolveEnvironmentsOptions(environmentResolvers, resolverOptions) {
 function isNonNullable(x) {
   return x != null;
 }
-var import_node_crypto, path7, url, fse, babel2, import_react_router2, import_es_module_lexer, import_pick3, import_jsesc, import_picocolors4, import_kebabCase, BUILD_CLIENT_ROUTE_QUERY_STRING, SSR_BUNDLE_PREFIX, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, getClientBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
+var import_node_crypto, path7, url, fse, babel2, import_react_router2, import_es_module_lexer, import_pick3, import_jsesc, import_picocolors4, import_kebabCase, BUILD_CLIENT_ROUTE_QUERY_STRING, SSR_BUNDLE_PREFIX, CSS_DEV_HELPER_ENVIRONMENT_NAME, virtualHmrRuntime, virtualInjectHmrRuntime, resolveRelativeRouteFilePath, virtual, getServerBuildDirectory, getClientBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
 var init_plugin = __esm({
   "vite/plugin.ts"() {
     "use strict";
@@ -1410,8 +1426,15 @@ var init_plugin = __esm({
     init_with_props();
     BUILD_CLIENT_ROUTE_QUERY_STRING = "?__react-router-build-client-route";
     SSR_BUNDLE_PREFIX = "ssrBundle_";
+    CSS_DEV_HELPER_ENVIRONMENT_NAME = "__react_router_css_dev_helper__";
     virtualHmrRuntime = create("hmr-runtime");
     virtualInjectHmrRuntime = create("inject-hmr-runtime");
+    resolveRelativeRouteFilePath = (route, reactRouterConfig) => {
+      let vite2 = getVite();
+      let file = route.file;
+      let fullPath = path7.resolve(reactRouterConfig.appDirectory, file);
+      return vite2.normalizePath(fullPath);
+    };
     virtual = {
       serverBuild: create("server-build"),
       serverManifest: create("server-manifest"),
@@ -2058,7 +2081,7 @@ async function run2(argv = process.argv.slice(2)) {
     return;
   }
   if (flags.version) {
-    let version = require("../package.json").version;
+    let version = require("../../package.json").version;
     console.log(version);
     return;
   }

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-8e9d8ef63
+ * @react-router/dev v0.0.0-experimental-8677247c0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-8e9d8ef63
+ * @react-router/dev v0.0.0-experimental-8677247c0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/static/refresh-utils.cjs

@@ -53,7 +53,7 @@ const enqueueUpdate = debounce(async () => {
       needsRevalidation,
       manifest.routes,
       window.__reactRouterRouteModules,
-      window.__reactRouterContext.future,
+      window.__reactRouterContext.ssr,
       window.__reactRouterContext.isSpaMode
     );
     __reactRouterDataRouter._internalSetRoutes(routes);

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-8e9d8ef63
+ * @react-router/dev v0.0.0-experimental-8677247c0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -678,11 +678,14 @@ var cloudflareDevProxyVitePlugin = (options = {}) => {
       }
     },
     configureServer: async (viteDevServer) => {
-      let { getPlatformProxy } = await importWrangler();
-      let { dispose, ...cloudflare } = await getPlatformProxy(
-        restOptions
-      );
-      let context = { cloudflare };
+      let context;
+      let getContext = async () => {
+        let { getPlatformProxy } = await importWrangler();
+        let { dispose, ...cloudflare } = await getPlatformProxy(
+          restOptions
+        );
+        return { cloudflare };
+      };
       return () => {
         if (!viteDevServer.config.server.middlewareMode) {
           viteDevServer.middlewares.use(async (nodeReq, nodeRes, next) => {
@@ -692,6 +695,7 @@ var cloudflareDevProxyVitePlugin = (options = {}) => {
               );
               let handler = (0, import_react_router.createRequestHandler)(build, "development");
               let req = fromNodeRequest(nodeReq, nodeRes);
+              context ??= await getContext();
               let loadContext = getLoadContext ? await getLoadContext({ request: req, context }) : context;
               let res = await handler(req, loadContext);
               await toNodeRequest(res, nodeRes);

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-8e9d8ef63
+ * @react-router/dev v0.0.0-experimental-8677247c0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -963,15 +963,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 +997,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}`);
       }
     }
   }
@@ -1073,7 +1058,7 @@ var getStylesForUrl = async ({
   rootDirectory,
   reactRouterConfig,
   entryClientFilePath,
-  cssModulesManifest,
+  loadCssContents,
   build,
   url: url2
 }) => {
@@ -1088,7 +1073,7 @@ var getStylesForUrl = async ({
   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),
@@ -1857,6 +1842,8 @@ var plugin = {
         return function Wrapped() {
           const props = {
             params: useParams(),
+            loaderData: useLoaderData(),
+            actionData: useActionData(),
           };
           return h(HydrateFallback, props);
         };
@@ -1965,6 +1952,7 @@ var CLIENT_ROUTE_EXPORTS = [
 ];
 var BUILD_CLIENT_ROUTE_QUERY_STRING = "?__react-router-build-client-route";
 var SSR_BUNDLE_PREFIX = "ssrBundle_";
+var CSS_DEV_HELPER_ENVIRONMENT_NAME = "__react_router_css_dev_helper__";
 function isSeverBundleEnvironmentName(name) {
   return name.startsWith(SSR_BUNDLE_PREFIX);
 }
@@ -2156,6 +2144,7 @@ var getServerBuildDirectory = (ctx, { serverBundleId } = {}) => path6.join(
   ...serverBundleId ? [serverBundleId] : []
 );
 var getClientBuildDirectory = (reactRouterConfig) => path6.join(reactRouterConfig.buildDirectory, "client");
+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",
@@ -2232,6 +2221,11 @@ var reactRouterVitePlugin = () => {
       // Otherwise, all routes are imported as usual
       ctx.reactRouterConfig.routes
     );
+    let prerenderPaths = await getPrerenderPaths(
+      ctx.reactRouterConfig.prerender,
+      ctx.reactRouterConfig.ssr,
+      routes
+    );
     return `
     import * as entryServer from ${JSON.stringify(
       resolveFileUrl(ctx, ctx.entryServerFilePath)
@@ -2258,6 +2252,7 @@ var reactRouterVitePlugin = () => {
       export const future = ${JSON.stringify(ctx.reactRouterConfig.future)};
       export const ssr = ${ctx.reactRouterConfig.ssr};
       export const isSpaMode = ${isSpaModeEnabled(ctx.reactRouterConfig)};
+      export const prerender = ${JSON.stringify(prerenderPaths)};
       export const publicPath = ${JSON.stringify(ctx.publicPath)};
       export const entry = { module: entryServer };
       export const routes = {
@@ -2406,6 +2401,7 @@ var reactRouterVitePlugin = () => {
       reactRouterServerManifest
     };
   };
+  let currentReactRouterManifestForDev = null;
   let getReactRouterManifestForDev = async () => {
     let routes = {};
     let routeManifestExports = await getRouteManifestModuleExports(
@@ -2462,7 +2458,7 @@ var reactRouterVitePlugin = () => {
         imports: []
       };
     }
-    return {
+    let reactRouterManifestForDev = {
       version: String(Math.random()),
       url: combineURLs(ctx.publicPath, virtual.browserManifest.url),
       hmr: {
@@ -2477,6 +2473,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 [
     {
@@ -2655,6 +2687,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,
@@ -2666,7 +2700,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({});
@@ -2703,7 +2753,7 @@ var reactRouterVitePlugin = () => {
               entryClientFilePath: ctx.entryClientFilePath,
               reactRouterConfig: ctx.reactRouterConfig,
               viteDevServer,
-              cssModulesManifest,
+              loadCssContents,
               build,
               url: url2
             });
@@ -2818,7 +2868,7 @@ var reactRouterVitePlugin = () => {
               ].join("\n")
             );
           }
-          if (ctx.reactRouterConfig.prerender != null && ctx.reactRouterConfig.prerender !== false) {
+          if (isPrerenderingEnabled(ctx.reactRouterConfig)) {
             await handlePrerender(
               viteConfig,
               ctx.reactRouterConfig,
@@ -2992,6 +3042,15 @@ var reactRouterVitePlugin = () => {
             let reactRouterManifest = viteCommand === "build" ? (await generateReactRouterManifestsForBuild({
               routeIds
             })).reactRouterServerManifest : await getReactRouterManifestForDev();
+            if (!ctx.reactRouterConfig.ssr) {
+              invariant(viteConfig);
+              validateSsrFalsePrerenderExports(
+                viteConfig,
+                ctx,
+                reactRouterManifest,
+                viteChildCompiler
+              );
+            }
             return `export default ${(0, import_jsesc.default)(reactRouterManifest, {
               es6: true
             })};`;
@@ -3092,12 +3151,15 @@ var reactRouterVitePlugin = () => {
         if (!route) return;
         if (!options?.ssr && isSpaModeEnabled(ctx.reactRouterConfig)) {
           let exportNames = getExportNames(code);
-          let serverOnlyExports = exportNames.filter(
-            (exp) => SERVER_ONLY_ROUTE_EXPORTS.includes(exp)
-          );
+          let serverOnlyExports = exportNames.filter((exp) => {
+            if (route.id === "root" && exp === "loader") {
+              return false;
+            }
+            return SERVER_ONLY_ROUTE_EXPORTS.includes(exp);
+          });
           if (serverOnlyExports.length > 0) {
             let str = serverOnlyExports.map((e) => `\`${e}\``).join(", ");
-            let message = `SPA Mode: ${serverOnlyExports.length} invalid route export(s) in \`${route.file}\`: ${str}. See https://remix.run/guides/spa-mode for more information.`;
+            let message = `SPA Mode: ${serverOnlyExports.length} invalid route export(s) in \`${route.file}\`: ${str}. See https://reactrouter.com/how-to/spa for more information.`;
             throw Error(message);
           }
           if (route.id !== "root") {
@@ -3105,7 +3167,7 @@ var reactRouterVitePlugin = () => {
               (exp) => exp === "HydrateFallback"
             );
             if (hasHydrateFallback) {
-              let message = `SPA Mode: Invalid \`HydrateFallback\` export found in \`${route.file}\`. \`HydrateFallback\` is only permitted on the root route in SPA Mode. See https://remix.run/guides/spa-mode for more information.`;
+              let message = `SPA Mode: Invalid \`HydrateFallback\` export found in \`${route.file}\`. \`HydrateFallback\` is only permitted on the root route in SPA Mode. See https://reactrouter.com/how-to/spa for more information.`;
               throw Error(message);
             }
           }
@@ -3211,8 +3273,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,
@@ -3398,8 +3459,11 @@ async function getRouteMetadata(cache, ctx, viteChildCompiler, route, readRouteF
   };
   return info;
 }
+function isPrerenderingEnabled(reactRouterConfig) {
+  return reactRouterConfig.prerender != null && reactRouterConfig.prerender !== false;
+}
 function isSpaModeEnabled(reactRouterConfig) {
-  return reactRouterConfig.ssr === false && (reactRouterConfig.prerender == null || reactRouterConfig.prerender === false || Array.isArray(reactRouterConfig.prerender) && reactRouterConfig.prerender.length === 1 && reactRouterConfig.prerender[0] === "/");
+  return reactRouterConfig.ssr === false && !isPrerenderingEnabled(reactRouterConfig);
 }
 async function getPrerenderBuildAndHandler(viteConfig, serverBuildDirectory, serverBuildFile) {
   let serverBuildPath = path6.join(serverBuildDirectory, serverBuildFile);
@@ -3411,20 +3475,49 @@ async function getPrerenderBuildAndHandler(viteConfig, serverBuildDirectory, ser
   };
 }
 async function handleSpaMode(viteConfig, reactRouterConfig, serverBuildDirectory, serverBuildFile, clientBuildDirectory) {
-  let { handler } = await getPrerenderBuildAndHandler(
+  let { build, handler } = await getPrerenderBuildAndHandler(
     viteConfig,
     serverBuildDirectory,
     serverBuildFile
   );
-  let request = new Request(`http://localhost${reactRouterConfig.basename}`);
+  let request = new Request(`http://localhost${reactRouterConfig.basename}`, {
+    headers: {
+      // Enable SPA mode in the server runtime and only render down to the root
+      "X-React-Router-SPA-Mode": "yes"
+    }
+  });
   let response = await handler(request);
   let html = await response.text();
-  validatePrerenderedResponse(response, html, "SPA Mode", "/");
-  validatePrerenderedHtml(html, "SPA Mode");
-  await fse.writeFile(path6.join(clientBuildDirectory, "index.html"), html);
-  viteConfig.logger.info(
-    "SPA Mode: index.html has been written to your " + import_picocolors3.default.bold(path6.relative(process.cwd(), clientBuildDirectory)) + " directory"
-  );
+  let isPrerenderSpaFallback = build.prerender.includes("/");
+  let filename3 = isPrerenderSpaFallback ? "__spa-fallback.html" : "index.html";
+  if (response.status !== 200) {
+    if (isPrerenderSpaFallback) {
+      throw new Error(
+        `Prerender: Received a ${response.status} status code from \`entry.server.tsx\` while prerendering your \`${filename3}\` file.
+` + html
+      );
+    } else {
+      throw new Error(
+        `SPA Mode: Received a ${response.status} status code from \`entry.server.tsx\` while prerendering your \`${filename3}\` file.
+` + html
+      );
+    }
+  }
+  if (!html.includes("window.__reactRouterContext =") || !html.includes("window.__reactRouterRouteModules =")) {
+    throw new Error(
+      "SPA Mode: Did you forget to include `<Scripts/>` in your root route? Your pre-rendered HTML cannot hydrate without `<Scripts />`."
+    );
+  }
+  await fse.writeFile(path6.join(clientBuildDirectory, filename3), html);
+  let prettyDir = path6.relative(process.cwd(), clientBuildDirectory);
+  let prettyPath = path6.join(prettyDir, filename3);
+  if (build.prerender.length > 0) {
+    viteConfig.logger.info(
+      `Prerender (html): SPA Fallback -> ${import_picocolors3.default.bold(prettyPath)}`
+    );
+  } else {
+    viteConfig.logger.info(`SPA Mode: Generated ${import_picocolors3.default.bold(prettyPath)}`);
+  }
 }
 async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirectory, serverBuildPath, clientBuildDirectory) {
   let { build, handler } = await getPrerenderBuildAndHandler(
@@ -3433,53 +3526,62 @@ async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirecto
     serverBuildPath
   );
   let routes = createPrerenderRoutes(build.routes);
-  let routesToPrerender;
-  if (typeof reactRouterConfig.prerender === "boolean") {
-    invariant(reactRouterConfig.prerender, "Expected prerender:true");
-    routesToPrerender = determineStaticPrerenderRoutes(
-      routes,
-      viteConfig,
-      true
-    );
-  } else if (typeof reactRouterConfig.prerender === "function") {
-    routesToPrerender = await reactRouterConfig.prerender({
-      getStaticPaths: () => determineStaticPrerenderRoutes(routes, viteConfig, false)
-    });
-  } else {
-    routesToPrerender = reactRouterConfig.prerender || ["/"];
-  }
   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 routesToPrerender) {
+  for (let path7 of build.prerender) {
     let matches = (0, import_react_router2.matchRoutes)(routes, `/${path7}/`.replace(/^\/\/+/, "/"));
-    let hasLoaders = matches?.some((m) => m.route.loader);
-    let data;
-    if (hasLoaders) {
-      data = await prerenderData(
-        handler,
-        path7,
-        clientBuildDirectory,
-        reactRouterConfig,
-        viteConfig,
-        { headers }
-      );
-    }
+    invariant(
+      matches,
+      `Unable to prerender path because it does not match any routes: ${path7}`
+    );
     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 && manifestRoute.loader;
+    let isResourceRoute = manifestRoute && !manifestRoute.default && !manifestRoute.ErrorBoundary;
     if (isResourceRoute) {
-      await prerenderResourceRoute(
-        handler,
-        path7,
-        clientBuildDirectory,
-        reactRouterConfig,
-        viteConfig,
-        { headers }
-      );
+      invariant(leafRoute);
+      invariant(manifestRoute);
+      if (manifestRoute.loader) {
+        await prerenderData(
+          handler,
+          path7,
+          [leafRoute.id],
+          clientBuildDirectory,
+          reactRouterConfig,
+          viteConfig,
+          { headers }
+        );
+        await prerenderResourceRoute(
+          handler,
+          path7,
+          clientBuildDirectory,
+          reactRouterConfig,
+          viteConfig,
+          { headers }
+        );
+      } else {
+        viteConfig.logger.warn(
+          `\u26A0\uFE0F Skipping prerendering for resource route without a loader: ${leafRoute?.id}`
+        );
+      }
     } else {
+      let hasLoaders = matches.some(
+        (m) => build.assets.routes[m.route.id]?.hasLoader
+      );
+      let data;
+      if (!isResourceRoute && hasLoaders) {
+        data = await prerenderData(
+          handler,
+          path7,
+          null,
+          clientBuildDirectory,
+          reactRouterConfig,
+          viteConfig,
+          { headers }
+        );
+      }
       await prerenderRoute(
         handler,
         path7,
@@ -3496,7 +3598,7 @@ async function handlePrerender(viteConfig, reactRouterConfig, serverBuildDirecto
     }
   }
 }
-function determineStaticPrerenderRoutes(routes, viteConfig, isBooleanUsage = false) {
+function getStaticPrerenderPaths(routes) {
   let paths = ["/"];
   let paramRoutes = [];
   function recurse(subtree, prefix = "") {
@@ -3516,28 +3618,33 @@ function determineStaticPrerenderRoutes(routes, viteConfig, isBooleanUsage = fal
     }
   }
   recurse(routes);
-  if (isBooleanUsage && paramRoutes.length > 0) {
-    viteConfig.logger.warn(
-      [
-        "\u26A0\uFE0F Paths with dynamic/splat params cannot be prerendered when using `prerender: true`.",
-        "You may want to use the `prerender()` API to prerender the following paths:",
-        ...paramRoutes.map((p) => "  - " + p)
-      ].join("\n")
-    );
-  }
-  return paths.map((p) => p.replace(/\/\/+/g, "/").replace(/(.+)\/$/, "$1"));
+  return {
+    paths: paths.map((p) => p.replace(/\/\/+/g, "/").replace(/(.+)\/$/, "$1")),
+    paramRoutes
+  };
 }
-async function prerenderData(handler, prerenderPath, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
+async function prerenderData(handler, prerenderPath, onlyRoutes, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
   let normalizedPath = `${reactRouterConfig.basename}${prerenderPath === "/" ? "/_root.data" : `${prerenderPath.replace(/\/$/, "")}.data`}`.replace(/\/\/+/g, "/");
-  let request = new Request(`http://localhost${normalizedPath}`, requestInit);
+  let url2 = new URL(`http://localhost${normalizedPath}`);
+  if (onlyRoutes?.length) {
+    url2.searchParams.set("_routes", onlyRoutes.join(","));
+  }
+  let request = new Request(url2, requestInit);
   let response = await handler(request);
   let data = await response.text();
-  validatePrerenderedResponse(response, data, "Prerender", normalizedPath);
+  if (response.status !== 200) {
+    throw new Error(
+      `Prerender (data): Received a ${response.status} status code from \`entry.server.tsx\` while prerendering the \`${path6}\` path.
+${normalizedPath}`
+    );
+  }
   let outdir = path6.relative(process.cwd(), clientBuildDirectory);
   let outfile = path6.join(outdir, ...normalizedPath.split("/"));
   await fse.ensureDir(path6.dirname(outfile));
   await fse.outputFile(outfile, data);
-  viteConfig.logger.info(`Prerender: Generated ${import_picocolors3.default.bold(outfile)}`);
+  viteConfig.logger.info(
+    `Prerender (data): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
+  );
   return data;
 }
 async function prerenderRoute(handler, prerenderPath, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
@@ -3548,42 +3655,65 @@ async function prerenderRoute(handler, prerenderPath, clientBuildDirectory, reac
   let request = new Request(`http://localhost${normalizedPath}`, requestInit);
   let response = await handler(request);
   let html = await response.text();
-  validatePrerenderedResponse(response, html, "Prerender", normalizedPath);
-  if (!reactRouterConfig.ssr) {
-    validatePrerenderedHtml(html, "Prerender");
+  if (response.status !== 200) {
+    throw new Error(
+      `Prerender (html): Received a ${response.status} status code from \`entry.server.tsx\` while prerendering the \`${normalizedPath}\` path.
+${html}`
+    );
   }
   let outdir = path6.relative(process.cwd(), clientBuildDirectory);
   let outfile = path6.join(outdir, ...normalizedPath.split("/"), "index.html");
   await fse.ensureDir(path6.dirname(outfile));
   await fse.outputFile(outfile, html);
-  viteConfig.logger.info(`Prerender: Generated ${import_picocolors3.default.bold(outfile)}`);
+  viteConfig.logger.info(
+    `Prerender (html): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
+  );
 }
 async function prerenderResourceRoute(handler, prerenderPath, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
   let normalizedPath = `${reactRouterConfig.basename}${prerenderPath}/`.replace(/\/\/+/g, "/").replace(/\/$/g, "");
   let request = new Request(`http://localhost${normalizedPath}`, requestInit);
   let response = await handler(request);
-  let text = await response.text();
-  validatePrerenderedResponse(response, text, "Prerender", normalizedPath);
-  let outdir = path6.relative(process.cwd(), clientBuildDirectory);
-  let outfile = path6.join(outdir, ...normalizedPath.split("/"));
-  await fse.ensureDir(path6.dirname(outfile));
-  await fse.outputFile(outfile, text);
-  viteConfig.logger.info(`Prerender: Generated ${import_picocolors3.default.bold(outfile)}`);
-}
-function validatePrerenderedResponse(response, html, prefix, path7) {
+  let content = Buffer.from(await response.arrayBuffer());
   if (response.status !== 200) {
     throw new Error(
-      `${prefix}: Received a ${response.status} status code from \`entry.server.tsx\` while prerendering the \`${path7}\` path.
-${html}`
+      `Prerender (resource): Received a ${response.status} status code from \`entry.server.tsx\` while prerendering the \`${normalizedPath}\` path.
+${content.toString("utf8")}`
     );
   }
+  let outdir = path6.relative(process.cwd(), clientBuildDirectory);
+  let outfile = path6.join(outdir, ...normalizedPath.split("/"));
+  await fse.ensureDir(path6.dirname(outfile));
+  await fse.outputFile(outfile, content);
+  viteConfig.logger.info(
+    `Prerender (resource): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
+  );
 }
-function validatePrerenderedHtml(html, prefix) {
-  if (!html.includes("window.__reactRouterContext =") || !html.includes("window.__reactRouterRouteModules =")) {
-    throw new Error(
-      `${prefix}: Did you forget to include <Scripts/> in your root route? Your pre-rendered HTML files cannot hydrate without \`<Scripts />\`.`
-    );
+async function getPrerenderPaths(prerender, ssr, routes, logWarning = false) {
+  let prerenderPaths = [];
+  if (prerender != null && prerender !== false) {
+    let prerenderRoutes = createPrerenderRoutes(routes);
+    if (prerender === true) {
+      let { paths, paramRoutes } = getStaticPrerenderPaths(prerenderRoutes);
+      if (logWarning && !ssr && paramRoutes.length > 0) {
+        console.warn(
+          import_picocolors3.default.yellow(
+            [
+              "\u26A0\uFE0F Paths with dynamic/splat params cannot be prerendered when using `prerender: true`. You may want to use the `prerender()` API to prerender the following paths:",
+              ...paramRoutes.map((p) => "  - " + p)
+            ].join("\n")
+          )
+        );
+      }
+      prerenderPaths = paths;
+    } else if (typeof prerender === "function") {
+      prerenderPaths = await prerender({
+        getStaticPaths: () => getStaticPrerenderPaths(prerenderRoutes).paths
+      });
+    } else {
+      prerenderPaths = prerender || ["/"];
+    }
   }
+  return prerenderPaths;
 }
 function groupRoutesByParentId2(manifest) {
   let routes = {};
@@ -3601,24 +3731,84 @@ function groupRoutesByParentId2(manifest) {
 function createPrerenderRoutes(manifest, parentId = "", routesByParentId = groupRoutesByParentId2(manifest)) {
   return (routesByParentId[parentId] || []).map((route) => {
     let commonRoute = {
-      // Always include root due to default boundaries
-      hasErrorBoundary: route.id === "root" || route.module.ErrorBoundary != null,
       id: route.id,
-      path: route.path,
-      loader: route.module.loader ? () => null : void 0,
-      action: void 0,
-      handle: route.module.handle
+      path: route.path
     };
-    return route.index ? {
-      index: true,
-      ...commonRoute
-    } : {
-      caseSensitive: route.caseSensitive,
+    if (route.index) {
+      return {
+        index: true,
+        ...commonRoute
+      };
+    }
+    return {
       children: createPrerenderRoutes(manifest, route.id, routesByParentId),
       ...commonRoute
     };
   });
 }
+async function validateSsrFalsePrerenderExports(viteConfig, ctx, manifest, viteChildCompiler) {
+  let prerenderPaths = await getPrerenderPaths(
+    ctx.reactRouterConfig.prerender,
+    ctx.reactRouterConfig.ssr,
+    manifest.routes,
+    true
+  );
+  if (prerenderPaths.length === 0) {
+    return;
+  }
+  let prerenderRoutes = createPrerenderRoutes(manifest.routes);
+  let prerenderedRoutes = /* @__PURE__ */ new Set();
+  for (let path7 of prerenderPaths) {
+    let matches = (0, import_react_router2.matchRoutes)(
+      prerenderRoutes,
+      `/${path7}/`.replace(/^\/\/+/, "/")
+    );
+    invariant(
+      matches,
+      `Unable to prerender path because it does not match any routes: ${path7}`
+    );
+    matches.forEach((m) => prerenderedRoutes.add(m.route.id));
+  }
+  let errors = [];
+  let routeExports = await getRouteManifestModuleExports(
+    viteChildCompiler,
+    ctx
+  );
+  for (let [routeId, route] of Object.entries(manifest.routes)) {
+    let invalidApis = [];
+    invariant(route, "Expected a route object in validateSsrFalseExports");
+    let exports2 = routeExports[route.id];
+    if (exports2.includes("headers")) invalidApis.push("headers");
+    if (exports2.includes("action")) invalidApis.push("action");
+    if (invalidApis.length > 0) {
+      errors.push(
+        `Prerender: ${invalidApis.length} invalid route export(s) in \`${route.id}\` when pre-rendering with \`ssr:false\`: ${invalidApis.map((a) => `\`${a}\``).join(", ")}.  See https://reactrouter.com/how-to/pre-rendering#invalid-exports for more information.`
+      );
+    }
+    if (!prerenderedRoutes.has(routeId)) {
+      if (exports2.includes("loader")) {
+        errors.push(
+          `Prerender: 1 invalid route export in \`${route.id}\` when pre-rendering with \`ssr:false\`: \`loader\`. See https://reactrouter.com/how-to/pre-rendering#invalid-exports for more information.`
+        );
+      }
+      let parentRoute = route.parentId ? manifest.routes[route.parentId] : null;
+      while (parentRoute && parentRoute.id !== "root") {
+        if (parentRoute.hasLoader && !parentRoute.hasClientLoader) {
+          errors.push(
+            `Prerender: 1 invalid route export in \`${parentRoute.id}\` when pre-rendering with \`ssr:false\`: \`loader\`. See https://reactrouter.com/how-to/pre-rendering#invalid-exports for more information.`
+          );
+        }
+        parentRoute = parentRoute.parentId && parentRoute.parentId !== "root" ? manifest.routes[parentRoute.parentId] : null;
+      }
+    }
+  }
+  if (errors.length > 0) {
+    viteConfig.logger.error(import_picocolors3.default.red(errors.join("\n")));
+    throw new Error(
+      "Invalid route exports found when prerendering with `ssr:false`"
+    );
+  }
+}
 function getAddressableRoutes(routes) {
   let nonAddressableIds = /* @__PURE__ */ new Set();
   for (let id in routes) {
@@ -3961,11 +4151,28 @@ async function getEnvironmentOptionsResolvers(ctx, buildManifest, viteCommand) {
       build: {
         outDir: getServerBuildDirectory(ctx),
         rollupOptions: {
-          input: viteUserConfig.build?.rollupOptions?.input ?? virtual.serverBuild.id
+          input: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig.environments?.ssr?.build?.rollupOptions?.input : viteUserConfig.build?.rollupOptions?.input) ?? virtual.serverBuild.id
         }
-      }
+      },
+      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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "0.0.0-experimental-8e9d8ef63",
+  "version": "0.0.0-experimental-8677247c0",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -88,7 +88,7 @@
     "set-cookie-parser": "^2.6.0",
     "valibot": "^0.41.0",
     "vite-node": "3.0.0-beta.2",
-    "@react-router/node": "0.0.0-experimental-8e9d8ef63"
+    "@react-router/node": "0.0.0-experimental-8677247c0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -106,7 +106,7 @@
     "@types/prettier": "^2.7.3",
     "@types/set-cookie-parser": "^2.4.1",
     "dotenv": "^16.0.0",
-    "esbuild-register": "^3.3.2",
+    "esbuild-register": "^3.6.0",
     "execa": "5.1.1",
     "express": "^4.19.2",
     "fast-glob": "3.2.11",
@@ -117,15 +117,15 @@
     "vite": "^6.0.0",
     "wireit": "0.14.9",
     "wrangler": "^3.28.2",
-    "react-router": "^0.0.0-experimental-8e9d8ef63",
-    "@react-router/serve": "0.0.0-experimental-8e9d8ef63"
+    "@react-router/serve": "0.0.0-experimental-8677247c0",
+    "react-router": "^0.0.0-experimental-8677247c0"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0",
     "wrangler": "^3.28.2",
-    "@react-router/serve": "^0.0.0-experimental-8e9d8ef63",
-    "react-router": "^0.0.0-experimental-8e9d8ef63"
+    "@react-router/serve": "^0.0.0-experimental-8677247c0",
+    "react-router": "^0.0.0-experimental-8677247c0"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {