@react-router/dev 7.8.0 → 7.8.1-pre.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # `@react-router/dev`
 
+## 7.8.1-pre.0
+
+### Patch Changes
+
+- Update generated `Route.MetaArgs` type so `loaderData` is only potentially undefined when an `ErrorBoundary` export is present ([#14173](https://github.com/remix-run/react-router/pull/14173))
+- Updated dependencies:
+  - `react-router@7.8.1-pre.0`
+  - `@react-router/node@7.8.1-pre.0`
+  - `@react-router/serve@7.8.1-pre.0`
+
 ## 7.8.0
 
 ### Patch Changes
@@ -708,7 +718,6 @@
   ```
 
   This initial implementation targets type inference for:
-
   - `Params` : Path parameters from your routing config in `routes.ts` including file-based routing
   - `LoaderData` : Loader data from `loader` and/or `clientLoader` within your route module
   - `ActionData` : Action data from `action` and/or `clientAction` within your route module
@@ -723,7 +732,6 @@
   ```
 
   Check out our docs for more:
-
   - [_Explanations > Type Safety_](https://reactrouter.com/dev/guides/explanation/type-safety)
   - [_How-To > Setting up type safety_](https://reactrouter.com/dev/guides/how-to/setting-up-type-safety)
 
@@ -923,7 +931,6 @@
 - Vite: Provide `Unstable_ServerBundlesFunction` and `Unstable_VitePluginConfig` types ([#8654](https://github.com/remix-run/remix/pull/8654))
 
 - Vite: add `--sourcemapClient` and `--sourcemapServer` flags to `remix vite:build` ([#8613](https://github.com/remix-run/remix/pull/8613))
-
   - `--sourcemapClient`
 
   - `--sourcemapClient=inline`
@@ -1260,7 +1267,6 @@
 - Add support for `clientLoader`/`clientAction`/`HydrateFallback` route exports ([RFC](https://github.com/remix-run/remix/discussions/7634)) ([#8173](https://github.com/remix-run/remix/pull/8173))
 
   Remix now supports loaders/actions that run on the client (in addition to, or instead of the loader/action that runs on the server). While we still recommend server loaders/actions for the majority of your data needs in a Remix app - these provide some levers you can pull for more advanced use-cases such as:
-
   - Leveraging a data source local to the browser (i.e., `localStorage`)
   - Managing a client-side cache of server data (like `IndexedDB`)
   - Bypassing the Remix server in a BFF setup and hitting your API directly from the browser
@@ -1664,7 +1670,6 @@
 - Output esbuild metafiles for bundle analysis ([#6772](https://github.com/remix-run/remix/pull/6772))
 
   Written to server build directory (`build/` by default):
-
   - `metafile.css.json`
   - `metafile.js.json` (browser JS)
   - `metafile.server.json` (server JS)
@@ -1762,7 +1767,6 @@
 - built-in tls support ([#6483](https://github.com/remix-run/remix/pull/6483))
 
   New options:
-
   - `--tls-key` / `tlsKey`: TLS key
   - `--tls-cert` / `tlsCert`: TLS Certificate
 
@@ -2033,7 +2037,6 @@
   ```
 
   The dev server will:
-
   - force `NODE_ENV=development` and warn you if it was previously set to something else
   - rebuild your app whenever your Remix app code changes
   - restart your app server whenever rebuilds succeed

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.8.0
+ * @react-router/dev v7.8.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1417,6 +1417,13 @@ var init_with_props = __esm({
   }
 });
 
+// vite/plugins/validate-plugin-order.ts
+var init_validate_plugin_order = __esm({
+  "vite/plugins/validate-plugin-order.ts"() {
+    "use strict";
+  }
+});
+
 // vite/plugin.ts
 async function resolveViteConfig({
   configFile,
@@ -1685,6 +1692,7 @@ var init_plugin = __esm({
     init_vite();
     init_config();
     init_with_props();
+    init_validate_plugin_order();
     CLIENT_NON_COMPONENT_EXPORTS = [
       "clientAction",
       "clientLoader",
@@ -1824,7 +1832,7 @@ async function viteAppBuild(root, {
         },
         configResolved(config) {
           let hasReactRouterPlugin = config.plugins.find(
-            (plugin) => plugin.name === "react-router" || plugin.name === "react-router/rsc/config"
+            (plugin) => plugin.name === "react-router" || plugin.name === "react-router/rsc"
           );
           if (!hasReactRouterPlugin) {
             throw new Error(
@@ -1964,7 +1972,7 @@ async function dev(root, {
     logLevel
   });
   if (!server.config.plugins.find(
-    (plugin) => plugin.name === "react-router" || plugin.name === "react-router/rsc/config"
+    (plugin) => plugin.name === "react-router" || plugin.name === "react-router/rsc"
   )) {
     console.error(
       import_picocolors6.default.red("React Router Vite plugin not found in Vite config")

package/dist/config/default-rsc-entries/entry.client.tsx

@@ -1,3 +1,5 @@
+import "virtual:react-router/unstable_rsc/inject-hmr-runtime";
+
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
 import {

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.8.0
+ * @react-router/dev v7.8.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/internal.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.8.0
+ * @react-router/dev v7.8.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,8 +46,8 @@ module.exports = __toCommonJS(internal_exports);
 
 // vite/rsc/plugin.ts
 var import_plugin_rsc = __toESM(require("@vitejs/plugin-rsc"));
-var import_plugin_react = __toESM(require("@vitejs/plugin-react"));
 var import_es_module_lexer2 = require("es-module-lexer");
+var babel = __toESM(require("@babel/core"));
 
 // vite/virtual-module.ts
 function create(name) {
@@ -247,7 +247,7 @@ function validateRouteConfig({
         `Route config in "${routeConfigFile}" is invalid.`,
         root ? `${root}` : [],
         nested ? Object.entries(nested).map(
-          ([path4, message]) => `Path: routes.${path4}
+          ([path5, message]) => `Path: routes.${path5}
 ${message}`
         ) : []
       ].flat().join("\n\n")
@@ -581,11 +581,11 @@ async function createConfigLoader({
       if (!fsWatcher) {
         fsWatcher = import_chokidar.default.watch([root, appDirectory], {
           ignoreInitial: true,
-          ignored: (path4) => {
-            let dirname4 = import_pathe3.default.dirname(path4);
+          ignored: (path5) => {
+            let dirname4 = import_pathe3.default.dirname(path5);
             return !dirname4.startsWith(appDirectory) && // Ensure we're only watching files outside of the app directory
             // that are at the root level, not nested in subdirectories
-            path4 !== root && // Watch the root directory itself
+            path5 !== root && // Watch the root directory itself
             dirname4 !== root;
           }
         });
@@ -785,7 +785,7 @@ function fullpath(lineage2) {
   if (lineage2.length === 1 && route?.id === "root") return "/";
   const isLayout = route && route.index !== true && route.path === void 0;
   if (isLayout) return void 0;
-  return "/" + lineage2.map((route2) => route2.path?.replace(/^\//, "")?.replace(/\/$/, "")).filter((path4) => path4 !== void 0 && path4 !== "").join("/");
+  return "/" + lineage2.map((route2) => route2.path?.replace(/^\//, "")?.replace(/\/$/, "")).filter((path5) => path5 !== void 0 && path5 !== "").join("/");
 }
 
 // typegen/generate.ts
@@ -941,8 +941,8 @@ function routeFilesType({
   );
 }
 function isInAppDirectory(ctx, routeFile) {
-  const path4 = Path3.resolve(ctx.config.appDirectory, routeFile);
-  return path4.startsWith(ctx.config.appDirectory);
+  const path5 = Path3.resolve(ctx.config.appDirectory, routeFile);
+  return path5.startsWith(ctx.config.appDirectory);
 }
 function getRouteAnnotations({
   ctx,
@@ -1054,21 +1054,21 @@ function getRouteAnnotations({
   return { filename: filename2, content };
 }
 function relativeImportSource(from, to) {
-  let path4 = Path3.relative(Path3.dirname(from), to);
-  let extension = Path3.extname(path4);
-  path4 = Path3.join(Path3.dirname(path4), Pathe.filename(path4));
-  if (!path4.startsWith("../")) path4 = "./" + path4;
+  let path5 = Path3.relative(Path3.dirname(from), to);
+  let extension = Path3.extname(path5);
+  path5 = Path3.join(Path3.dirname(path5), Pathe.filename(path5));
+  if (!path5.startsWith("../")) path5 = "./" + path5;
   if (!extension || /\.(js|ts)x?$/.test(extension)) {
     extension = ".js";
   }
-  return path4 + extension;
+  return path5 + extension;
 }
 function rootDirsPath(ctx, typesPath) {
   const rel = Path3.relative(typesDirectory(ctx), typesPath);
   return Path3.join(ctx.rootDirectory, rel);
 }
-function paramsType(path4) {
-  const params = parse2(path4);
+function paramsType(path5) {
+  const params = parse2(path5);
   return t2.tsTypeLiteral(
     Object.entries(params).map(([param, isRequired]) => {
       const property = t2.tsPropertySignature(
@@ -1158,14 +1158,16 @@ async function watch(rootDirectory, { mode, logger }) {
 
 // vite/rsc/plugin.ts
 var import_fs = require("fs");
-var import_path = require("path");
+var import_promises2 = require("fs/promises");
+var import_pathe5 = __toESM(require("pathe"));
 
 // vite/rsc/virtual-route-config.ts
-var import_node_path = __toESM(require("path"));
-function createVirtualRouteConfigCode({
+var import_pathe4 = __toESM(require("pathe"));
+function createVirtualRouteConfig({
   appDirectory,
   routeConfig
 }) {
+  let routeIdByFile = /* @__PURE__ */ new Map();
   let code = "export default [";
   const closeRouteSymbol = Symbol("CLOSE_ROUTE");
   let stack = [
@@ -1179,12 +1181,13 @@ function createVirtualRouteConfigCode({
       continue;
     }
     code += "{";
+    const routeFile = import_pathe4.default.resolve(appDirectory, route.file);
+    const routeId = route.id || createRouteId2(route.file, appDirectory);
+    routeIdByFile.set(routeFile, routeId);
     code += `lazy: () => import(${JSON.stringify(
-      `${import_node_path.default.resolve(appDirectory, route.file)}?route-module${route.id === "root" ? "&root-route=true" : ""}`
+      `${routeFile}?route-module${routeId === "root" ? "&root-route=true" : ""}`
     )}),`;
-    code += `id: ${JSON.stringify(
-      route.id || createRouteId2(route.file, appDirectory)
-    )},`;
+    code += `id: ${JSON.stringify(routeId)},`;
     if (typeof route.path === "string") {
       code += `path: ${JSON.stringify(route.path)},`;
     }
@@ -1203,10 +1206,10 @@ function createVirtualRouteConfigCode({
     }
   }
   code += "];\n";
-  return code;
+  return { code, routeIdByFile };
 }
 function createRouteId2(file, appDirectory) {
-  return import_node_path.default.relative(appDirectory, file).replace(/\\+/, "/").slice(0, -import_node_path.default.extname(file).length);
+  return import_pathe4.default.relative(appDirectory, file).replace(/\\+/, "/").slice(0, -import_pathe4.default.extname(file).length);
 }
 
 // vite/rsc/virtual-route-modules.ts
@@ -1220,10 +1223,10 @@ var removeExports = (ast, exportsToRemove) => {
   let markedForRemoval = /* @__PURE__ */ new Set();
   let removedExportLocalNames = /* @__PURE__ */ new Set();
   traverse(ast, {
-    ExportDeclaration(path4) {
-      if (path4.node.type === "ExportNamedDeclaration") {
-        if (path4.node.specifiers.length) {
-          path4.node.specifiers = path4.node.specifiers.filter((specifier) => {
+    ExportDeclaration(path5) {
+      if (path5.node.type === "ExportNamedDeclaration") {
+        if (path5.node.specifiers.length) {
+          path5.node.specifiers = path5.node.specifiers.filter((specifier) => {
             if (specifier.type === "ExportSpecifier" && specifier.exported.type === "Identifier") {
               if (exportsToRemove.includes(specifier.exported.name)) {
                 exportsFiltered = true;
@@ -1235,12 +1238,12 @@ var removeExports = (ast, exportsToRemove) => {
             }
             return true;
           });
-          if (path4.node.specifiers.length === 0) {
-            markedForRemoval.add(path4);
+          if (path5.node.specifiers.length === 0) {
+            markedForRemoval.add(path5);
           }
         }
-        if (path4.node.declaration?.type === "VariableDeclaration") {
-          let declaration = path4.node.declaration;
+        if (path5.node.declaration?.type === "VariableDeclaration") {
+          let declaration = path5.node.declaration;
           declaration.declarations = declaration.declarations.filter(
             (declaration2) => {
               if (declaration2.id.type === "Identifier" && exportsToRemove.includes(declaration2.id.name)) {
@@ -1254,30 +1257,30 @@ var removeExports = (ast, exportsToRemove) => {
             }
           );
           if (declaration.declarations.length === 0) {
-            markedForRemoval.add(path4);
+            markedForRemoval.add(path5);
           }
         }
-        if (path4.node.declaration?.type === "FunctionDeclaration") {
-          let id = path4.node.declaration.id;
+        if (path5.node.declaration?.type === "FunctionDeclaration") {
+          let id = path5.node.declaration.id;
           if (id && exportsToRemove.includes(id.name)) {
-            markedForRemoval.add(path4);
+            markedForRemoval.add(path5);
           }
         }
-        if (path4.node.declaration?.type === "ClassDeclaration") {
-          let id = path4.node.declaration.id;
+        if (path5.node.declaration?.type === "ClassDeclaration") {
+          let id = path5.node.declaration.id;
           if (id && exportsToRemove.includes(id.name)) {
-            markedForRemoval.add(path4);
+            markedForRemoval.add(path5);
           }
         }
       }
-      if (path4.node.type === "ExportDefaultDeclaration") {
+      if (path5.node.type === "ExportDefaultDeclaration") {
         if (exportsToRemove.includes("default")) {
-          markedForRemoval.add(path4);
-          if (path4.node.declaration) {
-            if (path4.node.declaration.type === "Identifier") {
-              removedExportLocalNames.add(path4.node.declaration.name);
-            } else if ((path4.node.declaration.type === "FunctionDeclaration" || path4.node.declaration.type === "ClassDeclaration") && path4.node.declaration.id) {
-              removedExportLocalNames.add(path4.node.declaration.id.name);
+          markedForRemoval.add(path5);
+          if (path5.node.declaration) {
+            if (path5.node.declaration.type === "Identifier") {
+              removedExportLocalNames.add(path5.node.declaration.name);
+            } else if ((path5.node.declaration.type === "FunctionDeclaration" || path5.node.declaration.type === "ClassDeclaration") && path5.node.declaration.id) {
+              removedExportLocalNames.add(path5.node.declaration.id.name);
             }
           }
         }
@@ -1285,21 +1288,21 @@ var removeExports = (ast, exportsToRemove) => {
     }
   });
   traverse(ast, {
-    ExpressionStatement(path4) {
-      if (!path4.parentPath.isProgram()) {
+    ExpressionStatement(path5) {
+      if (!path5.parentPath.isProgram()) {
         return;
       }
-      if (path4.node.expression.type === "AssignmentExpression") {
-        const left = path4.node.expression.left;
+      if (path5.node.expression.type === "AssignmentExpression") {
+        const left = path5.node.expression.left;
         if (left.type === "MemberExpression" && left.object.type === "Identifier" && (exportsToRemove.includes(left.object.name) || removedExportLocalNames.has(left.object.name))) {
-          markedForRemoval.add(path4);
+          markedForRemoval.add(path5);
         }
       }
     }
   });
   if (markedForRemoval.size > 0 || exportsFiltered) {
-    for (let path4 of markedForRemoval) {
-      path4.remove();
+    for (let path5 of markedForRemoval) {
+      path5.remove();
     }
     (0, import_babel_dead_code_elimination.deadCodeElimination)(ast, previouslyReferencedIdentifiers);
   }
@@ -1381,26 +1384,28 @@ function isClientRouteExport(name) {
 }
 function transformVirtualRouteModules({
   id,
-  code
+  code,
+  viteCommand
 }) {
   if (!id.includes("route-module")) {
     return;
   }
   if (isVirtualRouteModuleId(id)) {
-    return createVirtualRouteModuleCode({ id, code });
+    return createVirtualRouteModuleCode({ id, code, viteCommand });
   }
   if (isVirtualServerRouteModuleId(id)) {
     return createVirtualServerRouteModuleCode({ id, code });
   }
   if (isVirtualClientRouteModuleId(id)) {
-    return createVirtualClientRouteModuleCode({ id, code });
+    return createVirtualClientRouteModuleCode({ id, code, viteCommand });
   }
 }
 async function createVirtualRouteModuleCode({
   id,
-  code: routeSource
+  code: routeSource,
+  viteCommand
 }) {
-  const { staticExports, isServerFirstRoute } = parseRouteExports(routeSource);
+  const { staticExports, isServerFirstRoute, hasClientExports } = parseRouteExports(routeSource);
   const clientModuleId = getVirtualClientModuleId(id);
   const serverModuleId = getVirtualServerModuleId(id);
   let code = "";
@@ -1417,6 +1422,10 @@ async function createVirtualRouteModuleCode({
 `;
       }
     }
+    if (viteCommand === "serve" && !hasClientExports) {
+      code += `export { __ensureClientRouteModuleForHMR } from "${clientModuleId}";
+`;
+    }
   } else {
     for (const staticExport of staticExports) {
       if (isClientRouteExport(staticExport)) {
@@ -1461,9 +1470,10 @@ function createVirtualServerRouteModuleCode({
 }
 function createVirtualClientRouteModuleCode({
   id,
-  code: routeSource
+  code: routeSource,
+  viteCommand
 }) {
-  const { staticExports, isServerFirstRoute } = parseRouteExports(routeSource);
+  const { staticExports, isServerFirstRoute, hasClientExports } = parseRouteExports(routeSource);
   const exportsToRemove = isServerFirstRoute ? [...SERVER_ONLY_ROUTE_EXPORTS, ...COMPONENT_EXPORTS] : SERVER_ONLY_ROUTE_EXPORTS;
   const clientRouteModuleAst = import_parser.parse(routeSource, {
     sourceType: "module"
@@ -1484,16 +1494,24 @@ import { createElement as __rr_createElement } from "react";
 `;
     generatorResult.code += `}
 `;
+  }
+  if (viteCommand === "serve" && isServerFirstRoute && !hasClientExports) {
+    generatorResult.code += `
+export const __ensureClientRouteModuleForHMR = true;`;
   }
   return generatorResult;
 }
 function parseRouteExports(code) {
   const [, exportSpecifiers] = (0, import_es_module_lexer.parse)(code);
   const staticExports = exportSpecifiers.map(({ n: name }) => name);
+  const isServerFirstRoute = staticExports.some(
+    (staticExport) => staticExport === "ServerComponent"
+  );
   return {
     staticExports,
-    isServerFirstRoute: staticExports.some(
-      (staticExport) => staticExport === "ServerComponent"
+    isServerFirstRoute,
+    hasClientExports: staticExports.some(
+      isServerFirstRoute ? isClientNonComponentExport : isClientRouteExport
     )
   };
 }
@@ -1516,16 +1534,45 @@ function isVirtualServerRouteModuleId(id) {
   return /(\?|&)server-route-module(&|$)/.test(id);
 }
 
+// vite/plugins/validate-plugin-order.ts
+function validatePluginOrder() {
+  return {
+    name: "react-router:validate-plugin-order",
+    configResolved(viteConfig) {
+      let pluginIndex = (pluginName) => {
+        pluginName = Array.isArray(pluginName) ? pluginName : [pluginName];
+        return viteConfig.plugins.findIndex(
+          (plugin) => pluginName.includes(plugin.name)
+        );
+      };
+      let rollupPrePlugins = [
+        { pluginName: "@mdx-js/rollup", displayName: "@mdx-js/rollup" }
+      ];
+      for (let prePlugin of rollupPrePlugins) {
+        let prePluginIndex = pluginIndex(prePlugin.pluginName);
+        if (prePluginIndex >= 0 && prePluginIndex > pluginIndex(["react-router", "react-router/rsc"])) {
+          throw new Error(
+            `The "${prePlugin.displayName}" plugin should be placed before the React Router plugin in your Vite config file`
+          );
+        }
+      }
+    }
+  };
+}
+
 // vite/rsc/plugin.ts
 function reactRouterRSCVitePlugin() {
   let configLoader;
   let config;
   let typegenWatcherPromise;
+  let viteCommand;
+  let routeIdByFile;
   return [
     {
-      name: "react-router/rsc/config",
+      name: "react-router/rsc",
       async config(viteUserConfig, { command, mode }) {
         await import_es_module_lexer2.init;
+        viteCommand = command;
         const rootDirectory = getRootDirectory(viteUserConfig);
         const watch2 = command === "serve";
         configLoader = await createConfigLoader({ rootDirectory, mode, watch: watch2 });
@@ -1533,10 +1580,62 @@ function reactRouterRSCVitePlugin() {
         if (!configResult.ok) throw new Error(configResult.error);
         config = configResult.value;
         return {
+          resolve: {
+            dedupe: [
+              // https://react.dev/warnings/invalid-hook-call-warning#duplicate-react
+              "react",
+              "react-dom",
+              // Avoid router duplicates since mismatching routers cause `Error:
+              // You must render this element inside a <Remix> element`.
+              "react-router",
+              "react-router/dom",
+              "react-router-dom"
+            ]
+          },
+          optimizeDeps: {
+            esbuildOptions: {
+              jsx: "automatic"
+            },
+            include: [
+              // Pre-bundle React dependencies to avoid React duplicates,
+              // even if React dependencies are not direct dependencies.
+              // https://react.dev/warnings/invalid-hook-call-warning#duplicate-react
+              "react",
+              "react/jsx-runtime",
+              "react/jsx-dev-runtime",
+              "react-dom",
+              "react-dom/client"
+            ]
+          },
+          esbuild: {
+            jsx: "automatic",
+            jsxDev: viteCommand !== "build"
+          },
           environments: {
             client: { build: { outDir: "build/client" } },
             rsc: { build: { outDir: "build/server" } },
             ssr: { build: { outDir: "build/server/__ssr_build" } }
+          },
+          build: {
+            rollupOptions: {
+              // Copied from https://github.com/vitejs/vite-plugin-react/blob/c602225271d4acf462ba00f8d6d8a2e42492c5cd/packages/common/warning.ts
+              onwarn(warning, defaultHandler) {
+                if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) {
+                  return;
+                }
+                if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
+                  return;
+                }
+                if (viteUserConfig.build?.rollupOptions?.onwarn) {
+                  viteUserConfig.build.rollupOptions.onwarn(
+                    warning,
+                    defaultHandler
+                  );
+                } else {
+                  defaultHandler(warning);
+                }
+              }
+            }
           }
         };
       },
@@ -1575,56 +1674,239 @@ function reactRouterRSCVitePlugin() {
       },
       load(id) {
         if (id === virtual.routeConfig.resolvedId) {
-          return createVirtualRouteConfigCode({
+          const result = createVirtualRouteConfig({
             appDirectory: config.appDirectory,
             routeConfig: config.unstable_routeConfig
           });
+          routeIdByFile = result.routeIdByFile;
+          return result.code;
         }
       }
     },
     {
       name: "react-router/rsc/virtual-route-modules",
       transform(code, id) {
-        return transformVirtualRouteModules({ code, id });
+        return transformVirtualRouteModules({ code, id, viteCommand });
       }
     },
-    (0, import_plugin_react.default)(),
+    {
+      name: "react-router/rsc/hmr/inject-runtime",
+      enforce: "pre",
+      resolveId(id) {
+        if (id === virtual.injectHmrRuntime.id) {
+          return virtual.injectHmrRuntime.resolvedId;
+        }
+      },
+      async load(id) {
+        if (id !== virtual.injectHmrRuntime.resolvedId) return;
+        return viteCommand === "serve" ? [
+          `import RefreshRuntime from "${virtual.hmrRuntime.id}"`,
+          "RefreshRuntime.injectIntoGlobalHook(window)",
+          "window.$RefreshReg$ = () => {}",
+          "window.$RefreshSig$ = () => (type) => type",
+          "window.__vite_plugin_react_preamble_installed__ = true"
+        ].join("\n") : "";
+      }
+    },
+    {
+      name: "react-router/rsc/hmr/runtime",
+      enforce: "pre",
+      resolveId(id) {
+        if (id === virtual.hmrRuntime.id) return virtual.hmrRuntime.resolvedId;
+      },
+      async load(id) {
+        if (id !== virtual.hmrRuntime.resolvedId) return;
+        const reactRefreshDir = import_pathe5.default.dirname(
+          require.resolve("react-refresh/package.json")
+        );
+        const reactRefreshRuntimePath = import_pathe5.default.join(
+          reactRefreshDir,
+          "cjs/react-refresh-runtime.development.js"
+        );
+        return [
+          "const exports = {}",
+          await (0, import_promises2.readFile)(reactRefreshRuntimePath, "utf8"),
+          await (0, import_promises2.readFile)(
+            require.resolve("./static/rsc-refresh-utils.mjs"),
+            "utf8"
+          ),
+          "export default exports"
+        ].join("\n");
+      }
+    },
+    {
+      name: "react-router/rsc/hmr/react-refresh",
+      async transform(code, id, options) {
+        if (viteCommand !== "serve") return;
+        if (id.includes("/node_modules/")) return;
+        const filepath = id.split("?")[0];
+        const extensionsRE = /\.(jsx?|tsx?|mdx?)$/;
+        if (!extensionsRE.test(filepath)) return;
+        const devRuntime = "react/jsx-dev-runtime";
+        const ssr = options?.ssr === true;
+        const isJSX = filepath.endsWith("x");
+        const useFastRefresh = !ssr && (isJSX || code.includes(devRuntime));
+        if (!useFastRefresh) return;
+        const routeId = routeIdByFile?.get(filepath);
+        if (routeId !== void 0) {
+          return { code: addRefreshWrapper({ routeId, code, id }) };
+        }
+        const result = await babel.transformAsync(code, {
+          babelrc: false,
+          configFile: false,
+          filename: id,
+          sourceFileName: filepath,
+          parserOpts: {
+            sourceType: "module",
+            allowAwaitOutsideFunction: true
+          },
+          plugins: [[require("react-refresh/babel"), { skipEnvCheck: true }]],
+          sourceMaps: true
+        });
+        if (result === null) return;
+        code = result.code;
+        const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
+        if (refreshContentRE.test(code)) {
+          code = addRefreshWrapper({ code, id });
+        }
+        return { code, map: result.map };
+      }
+    },
+    {
+      name: "react-router/rsc/hmr/updates",
+      async hotUpdate({ server, file, modules }) {
+        if (this.environment.name !== "rsc") return;
+        const isServerOnlyChange = (server.environments.client.moduleGraph.getModulesByFile(file)?.size ?? 0) === 0;
+        for (const mod of getModulesWithImporters(modules)) {
+          if (!mod.file) continue;
+          const normalizedPath = import_pathe5.default.normalize(mod.file);
+          const routeId = routeIdByFile?.get(normalizedPath);
+          if (routeId !== void 0) {
+            const routeSource = await (0, import_promises2.readFile)(normalizedPath, "utf8");
+            const virtualRouteModuleCode = (await server.environments.rsc.pluginContainer.transform(
+              routeSource,
+              `${normalizedPath}?route-module`
+            )).code;
+            const { staticExports } = parseRouteExports(virtualRouteModuleCode);
+            const hasAction = staticExports.includes("action");
+            const hasComponent = staticExports.includes("default");
+            const hasErrorBoundary = staticExports.includes("ErrorBoundary");
+            const hasLoader = staticExports.includes("loader");
+            server.hot.send({
+              type: "custom",
+              event: "react-router:hmr",
+              data: {
+                routeId,
+                isServerOnlyChange,
+                hasAction,
+                hasComponent,
+                hasErrorBoundary,
+                hasLoader
+              }
+            });
+          }
+        }
+        return modules;
+      }
+    },
+    validatePluginOrder(),
     (0, import_plugin_rsc.default)({ entries: getRscEntries() })
   ];
 }
 var virtual = {
-  routeConfig: create("unstable_rsc/routes")
+  routeConfig: create("unstable_rsc/routes"),
+  injectHmrRuntime: create("unstable_rsc/inject-hmr-runtime"),
+  hmrRuntime: create("unstable_rsc/runtime")
 };
 function getRootDirectory(viteUserConfig) {
   return viteUserConfig.root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
 }
 function getRscEntries() {
-  const entriesDir = (0, import_path.join)(
+  const entriesDir = (0, import_pathe5.join)(
     getDevPackageRoot(),
     "dist",
     "config",
     "default-rsc-entries"
   );
   return {
-    client: (0, import_path.join)(entriesDir, "entry.client.tsx"),
-    rsc: (0, import_path.join)(entriesDir, "entry.rsc.tsx"),
-    ssr: (0, import_path.join)(entriesDir, "entry.ssr.tsx")
+    client: (0, import_pathe5.join)(entriesDir, "entry.client.tsx"),
+    rsc: (0, import_pathe5.join)(entriesDir, "entry.rsc.tsx"),
+    ssr: (0, import_pathe5.join)(entriesDir, "entry.ssr.tsx")
   };
 }
 function getDevPackageRoot() {
-  const currentDir = (0, import_path.dirname)(__dirname);
+  const currentDir = (0, import_pathe5.dirname)(__dirname);
   let dir = currentDir;
-  while (dir !== (0, import_path.dirname)(dir)) {
+  while (dir !== (0, import_pathe5.dirname)(dir)) {
     try {
-      const packageJsonPath = (0, import_path.join)(dir, "package.json");
+      const packageJsonPath = (0, import_pathe5.join)(dir, "package.json");
       (0, import_fs.readFileSync)(packageJsonPath, "utf-8");
       return dir;
     } catch {
-      dir = (0, import_path.dirname)(dir);
+      dir = (0, import_pathe5.dirname)(dir);
     }
   }
   throw new Error("Could not find package.json");
 }
+function getModulesWithImporters(modules) {
+  const visited = /* @__PURE__ */ new Set();
+  const result = /* @__PURE__ */ new Set();
+  function walk(module2) {
+    if (visited.has(module2)) return;
+    visited.add(module2);
+    result.add(module2);
+    for (const importer of module2.importers) {
+      walk(importer);
+    }
+  }
+  for (const module2 of modules) {
+    walk(module2);
+  }
+  return result;
+}
+function addRefreshWrapper({
+  routeId,
+  code,
+  id
+}) {
+  const acceptExports = routeId !== void 0 ? 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(routeId));
+}
+var REACT_REFRESH_HEADER = `
+import RefreshRuntime from "${virtual.hmrRuntime.id}";
+
+const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
+let prevRefreshReg;
+let prevRefreshSig;
+
+if (import.meta.hot && !inWebWorker) {
+  if (!window.__vite_plugin_react_preamble_installed__) {
+    throw new Error(
+      "React Router Vite plugin can't detect preamble. Something is wrong."
+    );
+  }
+
+  prevRefreshReg = window.$RefreshReg$;
+  prevRefreshSig = window.$RefreshSig$;
+  window.$RefreshReg$ = (type, id) => {
+    RefreshRuntime.register(type, __SOURCE__ + " " + id)
+  };
+  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
+}`.replaceAll("\n", "");
+var REACT_REFRESH_FOOTER = `
+if (import.meta.hot && !inWebWorker) {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+  RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
+    RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
+    import.meta.hot.accept((nextExports) => {
+      if (!nextExports) return;
+      __ROUTE_ID__ && window.__reactRouterRouteModuleUpdates.set(__ROUTE_ID__, nextExports);
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports, __ACCEPT_EXPORTS__);
+      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+    });
+  });
+}`;
 
 // internal.ts
 var __INTERNAL_DO_NOT_USE_OR_YOU_WILL_GET_A_STRONGLY_WORDED_LETTER__ = {

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.8.0
+ * @react-router/dev v7.8.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/static/rsc-refresh-utils.mjs

@@ -0,0 +1,126 @@
+// adapted from https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/src/refreshUtils.js
+// This file gets injected into the browser as a part of the HMR runtime
+
+function debounce(fn, delay) {
+  let handle;
+  return () => {
+    clearTimeout(handle);
+    handle = setTimeout(fn, delay);
+  };
+}
+
+/* eslint-disable no-undef */
+const enqueueUpdate = debounce(async () => {
+  if (routeUpdates.size > 0) {
+    const routeUpdateByRouteId = new Map();
+    for (const routeUpdate of routeUpdates) {
+      const routeId = routeUpdate.routeId;
+      const routeModule = window.__reactRouterRouteModuleUpdates.get(routeId);
+      if (routeModule) {
+        routeUpdateByRouteId.set(routeId, { routeModule, ...routeUpdate });
+      }
+    }
+    routeUpdates.clear();
+    __reactRouterDataRouter._updateRoutesForHMR(routeUpdateByRouteId);
+  }
+
+  try {
+    window.__reactRouterHdrActive = true;
+    await __reactRouterDataRouter.revalidate();
+  } finally {
+    window.__reactRouterHdrActive = false;
+  }
+
+  exports.performReactRefresh();
+}, 16);
+
+// Taken from https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/lib/runtime/RefreshUtils.js#L141
+// This allows to resister components not detected by SWC like styled component
+function registerExportsForReactRefresh(filename, moduleExports) {
+  for (const key in moduleExports) {
+    if (key === "__esModule") continue;
+    const exportValue = moduleExports[key];
+    if (exports.isLikelyComponentType(exportValue)) {
+      // 'export' is required to avoid key collision when renamed exports that
+      // shadow a local component name: https://github.com/vitejs/vite-plugin-react/issues/116
+      // The register function has an identity check to not register twice the same component,
+      // so this is safe to not used the same key here.
+      exports.register(exportValue, filename + " export " + key);
+    }
+  }
+}
+
+function validateRefreshBoundaryAndEnqueueUpdate(
+  prevExports,
+  nextExports,
+  // non-component exports that are handled by the framework (e.g. `meta` and `links` for route modules)
+  acceptExports = [],
+) {
+  if (
+    !predicateOnExport(
+      prevExports,
+      (key) => key in nextExports || acceptExports.includes(key),
+    )
+  ) {
+    return "Could not Fast Refresh (export removed)";
+  }
+  if (
+    !predicateOnExport(
+      nextExports,
+      (key) => key in prevExports || acceptExports.includes(key),
+    )
+  ) {
+    return "Could not Fast Refresh (new export)";
+  }
+
+  let hasExports = false;
+  const allExportsAreHandledOrUnchanged = predicateOnExport(
+    nextExports,
+    (key, value) => {
+      hasExports = true;
+      // React Router can handle additional exports (e.g. `meta` and `links`)
+      if (acceptExports.includes(key)) return true;
+      // React Fast Refresh can handle component exports
+      if (exports.isLikelyComponentType(value)) return true;
+      // Unchanged exports are implicitly handled
+      return prevExports[key] === nextExports[key];
+    },
+  );
+  if (hasExports && allExportsAreHandledOrUnchanged) {
+    enqueueUpdate();
+  } else {
+    return "Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports";
+  }
+}
+
+function predicateOnExport(moduleExports, predicate) {
+  for (const key in moduleExports) {
+    if (key === "__esModule") continue;
+    const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
+    if (desc && desc.get) return false;
+    if (!predicate(key, moduleExports[key])) return false;
+  }
+  return true;
+}
+
+// Hides vite-ignored dynamic import so that Vite can skip analysis if no other
+// dynamic import is present (https://github.com/vitejs/vite/pull/12732)
+function __hmr_import(module) {
+  return import(/* @vite-ignore */ module);
+}
+
+const routeUpdates = new Set();
+window.__reactRouterRouteModuleUpdates = new Map();
+
+import.meta.hot.on("react-router:hmr", async (routeUpdate) => {
+  routeUpdates.add(routeUpdate);
+  if (routeUpdate.isServerOnlyChange) {
+    enqueueUpdate();
+  }
+});
+
+exports.__hmr_import = __hmr_import;
+exports.registerExportsForReactRefresh = registerExportsForReactRefresh;
+exports.validateRefreshBoundaryAndEnqueueUpdate =
+  validateRefreshBoundaryAndEnqueueUpdate;
+exports.enqueueUpdate = enqueueUpdate;

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.8.0
+ * @react-router/dev v7.8.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.8.0
+ * @react-router/dev v7.8.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -2329,6 +2329,32 @@ function toFunctionExpression(decl) {
   );
 }
 
+// vite/plugins/validate-plugin-order.ts
+function validatePluginOrder() {
+  return {
+    name: "react-router:validate-plugin-order",
+    configResolved(viteConfig) {
+      let pluginIndex = (pluginName) => {
+        pluginName = Array.isArray(pluginName) ? pluginName : [pluginName];
+        return viteConfig.plugins.findIndex(
+          (plugin) => pluginName.includes(plugin.name)
+        );
+      };
+      let rollupPrePlugins = [
+        { pluginName: "@mdx-js/rollup", displayName: "@mdx-js/rollup" }
+      ];
+      for (let prePlugin of rollupPrePlugins) {
+        let prePluginIndex = pluginIndex(prePlugin.pluginName);
+        if (prePluginIndex >= 0 && prePluginIndex > pluginIndex(["react-router", "react-router/rsc"])) {
+          throw new Error(
+            `The "${prePlugin.displayName}" plugin should be placed before the React Router plugin in your Vite config file`
+          );
+        }
+      }
+    }
+  };
+}
+
 // vite/plugin.ts
 function extractPluginContext(viteConfig) {
   return viteConfig["__reactRouterPluginContext"];
@@ -2671,10 +2697,6 @@ var reactRouterVitePlugin = () => {
       buildManifest
     };
   };
-  let pluginIndex = (pluginName) => {
-    invariant(viteConfig);
-    return viteConfig.plugins.findIndex((plugin) => plugin.name === pluginName);
-  };
   let getServerEntry = async ({ routeIds }) => {
     invariant(viteConfig, "viteconfig required to generate the server entry");
     let routes = routeIds ? (
@@ -3238,17 +3260,6 @@ var reactRouterVitePlugin = () => {
           childCompilerConfigFile,
           "Vite config file was unable to be resolved for React Router child compiler"
         );
-        let rollupPrePlugins = [
-          { pluginName: "@mdx-js/rollup", displayName: "@mdx-js/rollup" }
-        ];
-        for (let prePlugin of rollupPrePlugins) {
-          let prePluginIndex = pluginIndex(prePlugin.pluginName);
-          if (prePluginIndex >= 0 && prePluginIndex > pluginIndex("react-router")) {
-            throw new Error(
-              `The "${prePlugin.displayName}" plugin should be placed before the React Router plugin in your Vite config file`
-            );
-          }
-        }
         const childCompilerPlugins = await asyncFlatten(
           childCompilerConfigFile.config.plugins ?? []
         );
@@ -3266,7 +3277,7 @@ var reactRouterVitePlugin = () => {
           envFile: false,
           plugins: [
             childCompilerPlugins.filter(
-              (plugin) => typeof plugin === "object" && plugin !== null && "name" in plugin && plugin.name !== "react-router" && plugin.name !== "react-router:route-exports" && plugin.name !== "react-router:hmr-updates"
+              (plugin) => typeof plugin === "object" && plugin !== null && "name" in plugin && plugin.name !== "react-router" && plugin.name !== "react-router:route-exports" && plugin.name !== "react-router:hmr-updates" && plugin.name !== "react-router:validate-plugin-order"
             ).map((plugin) => ({
               ...plugin,
               configureServer: void 0,
@@ -3955,7 +3966,8 @@ var reactRouterVitePlugin = () => {
           server.environments.client.reloadModule(clientModule);
         }
       }
-    }
+    },
+    validatePluginOrder()
   ];
 };
 function getParentClientNodes(clientModuleGraph, module2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.8.0",
+  "version": "7.8.1-pre.0",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -73,7 +73,6 @@
     "@babel/traverse": "^7.27.7",
     "@babel/types": "^7.27.7",
     "@npmcli/package-json": "^4.0.1",
-    "@vitejs/plugin-react": "^4.5.2",
     "@vitejs/plugin-rsc": "0.4.11",
     "arg": "^5.0.1",
     "babel-dead-code-elimination": "^1.0.6",
@@ -92,7 +91,7 @@
     "tinyglobby": "^0.2.14",
     "valibot": "^0.41.0",
     "vite-node": "^3.2.2",
-    "@react-router/node": "7.8.0"
+    "@react-router/node": "7.8.1-pre.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -115,15 +114,15 @@
     "vite": "^6.1.0",
     "wireit": "0.14.9",
     "wrangler": "^4.23.0",
-    "@react-router/serve": "7.8.0",
-    "react-router": "^7.8.0"
+    "@react-router/serve": "7.8.1-pre.0",
+    "react-router": "^7.8.1-pre.0"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0 || ^7.0.0",
     "wrangler": "^3.28.2 || ^4.0.0",
-    "@react-router/serve": "^7.8.0",
-    "react-router": "^7.8.0"
+    "@react-router/serve": "^7.8.1-pre.0",
+    "react-router": "^7.8.1-pre.0"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {