@react-router/dev 7.11.0 → 7.12.0

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # `@react-router/dev`
 
+## 7.12.0
+
+### Minor Changes
+
+- Add additional layer of CSRF protection by rejecting submissions to UI routes from external origins. If you need to permit access to specific external origins, you can specify them in the `react-router.config.ts` config `allowedActionOrigins` field. ([#14708](https://github.com/remix-run/react-router/pull/14708))
+
+### Patch Changes
+
+- Fix `Maximum call stack size exceeded` errors when HMR is triggered against code with cyclic imports ([#14522](https://github.com/remix-run/react-router/pull/14522))
+
+- fix(vite): Skip SSR middleware in preview server for SPA mode ([#14673](https://github.com/remix-run/react-router/pull/14673))
+
+- \[UNSTABLE] Add a new `future.unstable_trailingSlashAwareDataRequests` flag to provide consistent behavior of `request.pathname` inside `middleware`, `loader`, and `action` functions on document and data requests when a trailing slash is present in the browser URL. ([#14644](https://github.com/remix-run/react-router/pull/14644))
+
+  Currently, your HTTP and `request` pathnames would be as follows for `/a/b/c` and `/a/b/c/`
+
+  | URL `/a/b/c` | **HTTP pathname** | **`request` pathname\`** |
+  | ------------ | ----------------- | ------------------------ |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅               |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅               |
+
+  | URL `/a/b/c/` | **HTTP pathname** | **`request` pathname\`** |
+  | ------------- | ----------------- | ------------------------ |
+  | **Document**  | `/a/b/c/`         | `/a/b/c/` ✅              |
+  | **Data**      | `/a/b/c.data`     | `/a/b/c` ⚠️              |
+
+  With this flag enabled, these pathnames will be made consistent though a new `_.data` format for client-side `.data` requests:
+
+  | URL `/a/b/c` | **HTTP pathname** | **`request` pathname\`** |
+  | ------------ | ----------------- | ------------------------ |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅               |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅               |
+
+  | URL `/a/b/c/` | **HTTP pathname**  | **`request` pathname\`** |
+  | ------------- | ------------------ | ------------------------ |
+  | **Document**  | `/a/b/c/`          | `/a/b/c/` ✅              |
+  | **Data**      | `/a/b/c/_.data` ⬅️ | `/a/b/c/` ✅              |
+
+  This a bug fix but we are putting it behind an opt-in flag because it has the potential to be a "breaking bug fix" if you are relying on the URL format for any other application or caching logic.
+
+  Enabling this flag also changes the format of client side `.data` requests from `/_root.data` to `/_.data` when navigating to `/` to align with the new format. This does not impact the `request` pathname which is still `/` in all cases.
+
+- Updated dependencies:
+  - `react-router@7.12.0`
+  - `@react-router/node@7.12.0`
+  - `@react-router/serve@7.12.0`
+
 ## 7.11.0
 
 ### Minor Changes

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -506,10 +506,12 @@ async function resolveConfig({
   let future = {
     unstable_optimizeDeps: userAndPresetConfigs.future?.unstable_optimizeDeps ?? false,
     unstable_subResourceIntegrity: userAndPresetConfigs.future?.unstable_subResourceIntegrity ?? false,
+    unstable_trailingSlashAwareDataRequests: userAndPresetConfigs.future?.unstable_trailingSlashAwareDataRequests ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
     v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
   };
+  let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({
     appDirectory,
     basename: basename3,
@@ -523,6 +525,7 @@ async function resolveConfig({
     serverBundles,
     serverModuleFormat,
     ssr,
+    allowedActionOrigins,
     unstable_routeConfig: routeConfig
   });
   for (let preset of reactRouterUserConfig.presets ?? []) {
@@ -956,6 +959,7 @@ function generateServerBuild(ctx) {
       export const routeDiscovery: ServerBuild["routeDiscovery"];
       export const routes: ServerBuild["routes"];
       export const ssr: ServerBuild["ssr"];
+      export const allowedActionOrigins: ServerBuild["allowedActionOrigins"];
       export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
     }
   `;

package/dist/config.d.ts

@@ -39,6 +39,7 @@ type ServerModuleFormat = "esm" | "cjs";
 interface FutureConfig {
     unstable_optimizeDeps: boolean;
     unstable_subResourceIntegrity: boolean;
+    unstable_trailingSlashAwareDataRequests: boolean;
     /**
      * Enable route middleware
      */
@@ -147,6 +148,11 @@ type ReactRouterConfig = {
      * SPA without server-rendering. Default's to `true`.
      */
     ssr?: boolean;
+    /**
+     * The allowed origins for actions / mutations. Does not apply to routes
+     * without a component. micromatch glob patterns are supported.
+     */
+    allowedActionOrigins?: string[];
 };
 type ResolvedReactRouterConfig = Readonly<{
     /**
@@ -212,6 +218,11 @@ type ResolvedReactRouterConfig = Readonly<{
      * SPA without server-rendering. Default's to `true`.
      */
     ssr: boolean;
+    /**
+     * The allowed origins for actions / mutations. Does not apply to routes
+     * without a component. micromatch glob patterns are supported.
+     */
+    allowedActionOrigins: string[] | false;
     /**
      * The resolved array of route config entries exported from `routes.ts`
      */

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -535,10 +535,12 @@ async function resolveConfig({
   let future = {
     unstable_optimizeDeps: userAndPresetConfigs.future?.unstable_optimizeDeps ?? false,
     unstable_subResourceIntegrity: userAndPresetConfigs.future?.unstable_subResourceIntegrity ?? false,
+    unstable_trailingSlashAwareDataRequests: userAndPresetConfigs.future?.unstable_trailingSlashAwareDataRequests ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
     v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
   };
+  let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({
     appDirectory,
     basename,
@@ -552,6 +554,7 @@ async function resolveConfig({
     serverBundles,
     serverModuleFormat,
     ssr,
+    allowedActionOrigins,
     unstable_routeConfig: routeConfig
   });
   for (let preset of reactRouterUserConfig.presets ?? []) {

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -562,10 +562,12 @@ async function resolveConfig({
   let future = {
     unstable_optimizeDeps: userAndPresetConfigs.future?.unstable_optimizeDeps ?? false,
     unstable_subResourceIntegrity: userAndPresetConfigs.future?.unstable_subResourceIntegrity ?? false,
+    unstable_trailingSlashAwareDataRequests: userAndPresetConfigs.future?.unstable_trailingSlashAwareDataRequests ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
     v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
   };
+  let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({
     appDirectory,
     basename: basename3,
@@ -579,6 +581,7 @@ async function resolveConfig({
     serverBundles,
     serverModuleFormat,
     ssr,
+    allowedActionOrigins,
     unstable_routeConfig: routeConfig
   });
   for (let preset of reactRouterUserConfig.presets ?? []) {
@@ -966,6 +969,7 @@ function generateServerBuild(ctx) {
       export const routeDiscovery: ServerBuild["routeDiscovery"];
       export const routes: ServerBuild["routes"];
       export const ssr: ServerBuild["ssr"];
+      export const allowedActionOrigins: ServerBuild["allowedActionOrigins"];
       export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
     }
   `;
@@ -2921,7 +2925,9 @@ var reactRouterVitePlugin = () => {
                   href: "${ctx.publicPath}@react-router/critical.css?pathname=" + pathname,
                 };
               }
-            ` : ""}`;
+            ` : ""}
+      export const allowedActionOrigins = ${JSON.stringify(ctx.reactRouterConfig.allowedActionOrigins)};
+    `;
   };
   let loadViteManifest = async (directory) => {
     let manifestContents = await (0, import_promises2.readFile)(
@@ -3536,6 +3542,9 @@ var reactRouterVitePlugin = () => {
       },
       configurePreviewServer(previewServer) {
         return () => {
+          if (!ctx.reactRouterConfig.ssr) {
+            return;
+          }
           previewServer.middlewares.use(async (req, res, next) => {
             try {
               let serverBuildDirectory = getServerBuildDirectory(
@@ -4099,10 +4108,8 @@ var reactRouterVitePlugin = () => {
         if (this.environment.name !== "ssr" && modules.length <= 0) {
           return;
         }
-        let clientModules = uniqueNodes(
-          modules.flatMap(
-            (mod) => getParentClientNodes(server.environments.client.moduleGraph, mod)
-          )
+        let clientModules = modules.flatMap(
+          (mod) => getParentClientNodes(server.environments.client.moduleGraph, mod)
         );
         for (let clientModule of clientModules) {
           server.environments.client.reloadModule(clientModule);
@@ -4113,30 +4120,22 @@ var reactRouterVitePlugin = () => {
     warnOnClientSourceMaps()
   ];
 };
-function getParentClientNodes(clientModuleGraph, module2) {
+function getParentClientNodes(clientModuleGraph, module2, seenNodes = /* @__PURE__ */ new Set()) {
   if (!module2.id) {
     return [];
   }
+  if (seenNodes.has(module2.url)) {
+    return [];
+  }
+  seenNodes.add(module2.url);
   let clientModule = clientModuleGraph.getModuleById(module2.id);
   if (clientModule) {
     return [clientModule];
   }
   return [...module2.importers].flatMap(
-    (importer) => getParentClientNodes(clientModuleGraph, importer)
+    (importer) => getParentClientNodes(clientModuleGraph, importer, seenNodes)
   );
 }
-function uniqueNodes(nodes) {
-  let nodeUrls = /* @__PURE__ */ new Set();
-  let unique = [];
-  for (let node of nodes) {
-    if (nodeUrls.has(node.url)) {
-      continue;
-    }
-    nodeUrls.add(node.url);
-    unique.push(node);
-  }
-  return unique;
-}
 function addRefreshWrapper(reactRouterConfig, code, id) {
   let route = getRoute(reactRouterConfig, id);
   let acceptExports = route ? CLIENT_NON_COMPONENT_EXPORTS : [];
@@ -4411,7 +4410,21 @@ function getStaticPrerenderPaths(routes) {
   };
 }
 async function prerenderData(handler, prerenderPath, onlyRoutes, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
-  let normalizedPath = `${reactRouterConfig.basename}${prerenderPath === "/" ? "/_root.data" : `${prerenderPath.replace(/\/$/, "")}.data`}`.replace(/\/\/+/g, "/");
+  let dataRequestPath;
+  if (reactRouterConfig.future.unstable_trailingSlashAwareDataRequests) {
+    if (prerenderPath.endsWith("/")) {
+      dataRequestPath = `${prerenderPath}_.data`;
+    } else {
+      dataRequestPath = `${prerenderPath}.data`;
+    }
+  } else {
+    if (prerenderPath === "/") {
+      dataRequestPath = "/_root.data";
+    } else {
+      dataRequestPath = `${prerenderPath.replace(/\/$/, "")}.data`;
+    }
+  }
+  let normalizedPath = `${reactRouterConfig.basename}${dataRequestPath}`.replace(/\/\/+/g, "/");
   let url2 = new URL(`http://localhost${normalizedPath}`);
   if (onlyRoutes?.length) {
     url2.searchParams.set("_routes", onlyRoutes.join(","));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.11.0",
+  "version": "7.12.0",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -92,7 +92,7 @@
     "tinyglobby": "^0.2.14",
     "valibot": "^1.2.0",
     "vite-node": "^3.2.2",
-    "@react-router/node": "7.11.0"
+    "@react-router/node": "7.12.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -116,8 +116,8 @@
     "vite": "^6.3.0",
     "wireit": "0.14.9",
     "wrangler": "^4.23.0",
-    "@react-router/serve": "7.11.0",
-    "react-router": "^7.11.0"
+    "@react-router/serve": "7.12.0",
+    "react-router": "^7.12.0"
   },
   "peerDependencies": {
     "@vitejs/plugin-rsc": "~0.5.7",
@@ -125,8 +125,8 @@
     "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.11.0",
-    "react-router": "^7.11.0"
+    "@react-router/serve": "^7.12.0",
+    "react-router": "^7.12.0"
   },
   "peerDependenciesMeta": {
     "@vitejs/plugin-rsc": {