[Bug]: RR7 - With `basename` configured, `.data` requests against root index not correctly routed

[mpqmpqm]

What version of React Router are you using?

7

Steps to Reproduce

Minimal repro

1. Configure vite.config.base and vite.config.reactRouter.basename.
2. Add a Link component to the root index, or an action against the root index.
3. Observe that .data requests against root index are routed to localhost:5173/${basename}.data, rather than e.g. localhost:5173/${basename}/_root.data.
4. Observe that .data requests against root index 404.

Expected Behavior

.data requests against root index should resolve accounting for configured basename.

Actual Behavior

.data requests against root index 404. .data requests against nested routes resolve as expected.

In minimal repro above, try clicking links to Home and submitting action on that route. Then try the same at About. Observe that About works while Home (root index) doesn't.

[mpqmpqm]

Here are the patches I issued to fix this in my Remix 2.14.0 project:

diff --git a/node_modules/@remix-run/react/dist/esm/single-fetch.js b/node_modules/@remix-run/react/dist/esm/single-fetch.js
index 96f10cd..4126369 100644
--- a/node_modules/@remix-run/react/dist/esm/single-fetch.js
+++ b/node_modules/@remix-run/react/dist/esm/single-fetch.js
@@ -300,6 +300,8 @@ function singleFetchUrl(reqUrl) {
   let url = typeof reqUrl === "string" ? new URL(reqUrl, window.location.origin) : reqUrl;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (url.pathname === window.__remixContext.basename) {
+    url.pathname = window.__remixContext.basename.concat("_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }

diff --git a/node_modules/@remix-run/server-runtime/dist/server.js b/node_modules/@remix-run/server-runtime/dist/server.js
index 7e639d9..f2af2db 100644
--- a/node_modules/@remix-run/server-runtime/dist/server.js
+++ b/node_modules/@remix-run/server-runtime/dist/server.js
@@ -128,7 +128,12 @@ const createRequestHandler = (build, mode$1) => {
       }
     } else if (_build.future.v3_singleFetch && url.pathname.endsWith(".data")) {
       let handlerUrl = new URL(request.url);
-      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(/^\/_root$/, "/");
+      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(
+        _build.basename ?
+          /\/_root$/ :
+          /^\/_root$/,
+        "/"
+      );
       let singleFetchMatches = routeMatching.matchServerRoutes(routes, handlerUrl.pathname, _build.basename);
       response = await handleSingleFetchRequest(serverMode, _build, staticHandler, request, handlerUrl, loadContext, handleError);
       if (_build.entry.module.handleDataRequest) {

[LeoDanielsson]

We ran into this issue when upgrading our Remix app (without single fetch) to RR7.

It works locally with basename configured but failed in the production environment since our reverse proxy wouldn't route /my-app.data requests to our application as it's technically a different path than /my-app.

We ended up working around it by configuring our reverse proxy to route /my-app.data to the app (in addition to /my-app/*).

It works, but it would definitely be cleaner if the requests were /my-app/_root.data

[nikrad7]

Hello there! We encounter same issue after enable singleFetch future at our roadmap to react-router 7.

We use cookie based remix-auth authorization with cookie path option (which equals /basename). Since index route is secure and protected by auth middleware, this bug leads to infinite redirect loop between index page and login page. Problem is that browser will not append cookies header for request with /basename.data since it doesn't match path option, and auth middleware will return singleFetch client redirect to login page route. And for second client request cookies will be sended, since login route match browser cookie path logic (/basename/login), and result of request will be redirect back to index page.

Workaroung
Patch provided by @mpqmpqm is worked, but with slight additional fixes (we at latest, remix 2.15.1 version):

1. basename may be without trailing slash, so we ensure that forward slash will be added before concat basename and _root.data patname postfix (at single-fetch.js):

function singleFetchUrl(reqUrl) {
  let url = typeof reqUrl === "string" ? new URL(reqUrl, window.location.origin) : reqUrl;
  const basename = window.__remixContext.basename;
  if (url.pathname === "/") {
    url.pathname = "_root.data";
  } else if (basename && (url.pathname === basename || url.pathname === `${basename}/`)) {
    url.pathname = basename.endsWith("/") ? basename.concat("_root.data") : basename.concat("/_root.data");
  } else {
    url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
  }
  return url;
}

2. patch both files (server.js, single-fetch.js) code entries at dist and dist\esm. At least when using pnpm as repo and patch utility.

[skrhlm]

could possibly be related to this?
#12536

[mattoni]

I'm also running into this issue after migrating a remix app into RR7. I noticed it when using the browser's back button to go back to the entry page, and getting a 404. Also does not happen in dev, but only in a production build.

[manzaloros]

I'm also having this issue.

I noticed it when using the browser's back button to go back to the entry page, and getting a 404. Also does not happen in dev, but only in a production build.

It happens in Remix v2 latest when the v3_singleFetch is enabled. We have a baseURL defined:

// vite.config.ts
  remix({
        basename: "/my-basename/",

This is a blocker to upgrade from Remix to React Router 7.

Is there any fix for this, other than a patch?

[manzaloros]

@ryanflorence , is the team aware of this bug / is there any fix planned?

I attempted to patch React Router, but this didn't solve the 404 issue with a basename:

index 53d57562cbbe0a80bc80a88fc930b84679c805e2..73c737041b92b573ad9a77492412315ffdbc63d7 100644
--- a/dist/production/index.js
+++ b/dist/production/index.js
@@ -5952,8 +5952,11 @@ function singleFetchUrl(reqUrl) {
     // don't assume window is available
     typeof window === "undefined" ? "server://singlefetch/" : window.location.origin
   ) : reqUrl;
+  const basename = window.__reactRouterContext.basename;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (basename && (url.pathname === basename || url.pathname === `${basename}/`)) {
+    url.pathname = basename.endsWith("/") ? basename.concat("_root.data") : basename.concat("/_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
@@ -9152,7 +9155,12 @@ var createRequestHandler = (build, mode) => {
     let response;
     if (url.pathname.endsWith(".data")) {
       let handlerUrl = new URL(request.url);
-      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(/^\/_root$/, "/");
+      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(
+                _build.basename ?
+                  /\/_root$/ :
+                  /^\/_root$/,
+                "/"
+      );
       let singleFetchMatches = matchServerRoutes(
         routes,
         handlerUrl.pathname,

[skrhlm]

My thought here was that the x.data-files should be moved inside of it's corresponding path folder, so that each page would be self-contained no matter what basename configuration is chosen.

For example, this structure:

- about.data
- about/
- - index.html
- - contact/
- - - index.html
- - contact.data

would instead be:

- about/
- - index.html
- - about.data
- - contact/
- - - index.html
- - - contact.data

[rjaguilar]

I'm having the same issue with the additional issue that my form action that is set to /${basename} gets sent to /${basename}.data instead of /${basename}/_root.data

[Aleuck]

For React Router v7, I had to create this patch (based on @mpqmpqm's) for it to work consistently in local and production environments.

diff --git a/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs b/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs
index 25fce4e..85d529b 100644
--- a/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs
+++ b/node_modules/react-router/dist/development/chunk-SYFQ2XB5.mjs
@@ -5811,6 +5811,8 @@ function singleFetchUrl(reqUrl) {
   ) : reqUrl;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (url.pathname === window.__reactRouterContext.basename) {
+    url.pathname = window.__reactRouterContext.basename.concat("_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
@@ -9009,7 +9011,12 @@ var createRequestHandler = (build, mode) => {
     let response;
     if (url.pathname.endsWith(".data")) {
       let handlerUrl = new URL(request.url);
-      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(/^\/_root$/, "/");
+      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(
+        _build.basename ?
+          /\/_root$/ :
+          /^\/_root$/,
+        "/"
+      );
       let singleFetchMatches = matchServerRoutes(
         routes,
         handlerUrl.pathname,
diff --git a/node_modules/react-router/dist/development/dom-export.js b/node_modules/react-router/dist/development/dom-export.js
index 59c9a78..af2dbfb 100644
--- a/node_modules/react-router/dist/development/dom-export.js
+++ b/node_modules/react-router/dist/development/dom-export.js
@@ -4471,6 +4471,8 @@ function singleFetchUrl(reqUrl) {
   ) : reqUrl;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (url.pathname === window.__reactRouterContext.basename) {
+    url.pathname = window.__reactRouterContext.basename.concat("_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
diff --git a/node_modules/react-router/dist/development/index.js b/node_modules/react-router/dist/development/index.js
index 46834a0..42c686c 100644
--- a/node_modules/react-router/dist/development/index.js
+++ b/node_modules/react-router/dist/development/index.js
@@ -5956,6 +5956,8 @@ function singleFetchUrl(reqUrl) {
   ) : reqUrl;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (url.pathname === window.__reactRouterContext.basename) {
+    url.pathname = window.__reactRouterContext.basename.concat("_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
@@ -9154,7 +9156,12 @@ var createRequestHandler = (build, mode) => {
     let response;
     if (url.pathname.endsWith(".data")) {
       let handlerUrl = new URL(request.url);
-      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(/^\/_root$/, "/");
+      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(
+        _build.basename ?
+          /\/_root$/ :
+          /^\/_root$/,
+        "/"
+      );
       let singleFetchMatches = matchServerRoutes(
         routes,
         handlerUrl.pathname,
diff --git a/node_modules/react-router/dist/production/chunk-OKQ6KMOJ.mjs b/node_modules/react-router/dist/production/chunk-OKQ6KMOJ.mjs
index 3d1b632..535fe32 100644
--- a/node_modules/react-router/dist/production/chunk-OKQ6KMOJ.mjs
+++ b/node_modules/react-router/dist/production/chunk-OKQ6KMOJ.mjs
@@ -5811,6 +5811,8 @@ function singleFetchUrl(reqUrl) {
   ) : reqUrl;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (url.pathname === window.__reactRouterContext.basename) {
+    url.pathname = window.__reactRouterContext.basename.concat("_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
@@ -9009,7 +9011,12 @@ var createRequestHandler = (build, mode) => {
     let response;
     if (url.pathname.endsWith(".data")) {
       let handlerUrl = new URL(request.url);
-      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(/^\/_root$/, "/");
+      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(
+        _build.basename ?
+          /\/_root$/ :
+          /^\/_root$/,
+        "/"
+      );
       let singleFetchMatches = matchServerRoutes(
         routes,
         handlerUrl.pathname,
diff --git a/node_modules/react-router/dist/production/dom-export.js b/node_modules/react-router/dist/production/dom-export.js
index 8d83202..cac7673 100644
--- a/node_modules/react-router/dist/production/dom-export.js
+++ b/node_modules/react-router/dist/production/dom-export.js
@@ -4471,6 +4471,8 @@ function singleFetchUrl(reqUrl) {
   ) : reqUrl;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (url.pathname === window.__reactRouterContext.basename) {
+    url.pathname = window.__reactRouterContext.basename.concat("_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
diff --git a/node_modules/react-router/dist/production/index.js b/node_modules/react-router/dist/production/index.js
index d5cace8..1f1138a 100644
--- a/node_modules/react-router/dist/production/index.js
+++ b/node_modules/react-router/dist/production/index.js
@@ -5956,6 +5956,8 @@ function singleFetchUrl(reqUrl) {
   ) : reqUrl;
   if (url.pathname === "/") {
     url.pathname = "_root.data";
+  } else if (url.pathname === window.__reactRouterContext.basename) {
+    url.pathname = window.__reactRouterContext.basename.concat("_root.data");
   } else {
     url.pathname = `${url.pathname.replace(/\/$/, "")}.data`;
   }
@@ -9154,7 +9156,12 @@ var createRequestHandler = (build, mode) => {
     let response;
     if (url.pathname.endsWith(".data")) {
       let handlerUrl = new URL(request.url);
-      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(/^\/_root$/, "/");
+      handlerUrl.pathname = handlerUrl.pathname.replace(/\.data$/, "").replace(
+        _build.basename ?
+          /\/_root$/ :
+          /^\/_root$/,
+        "/"
+      );
       let singleFetchMatches = matchServerRoutes(
         routes,
         handlerUrl.pathname,

[cmatlock-comp]

I am still experiencing this issue, any updates on a patch for this?