[v7, framework] Fog of War throws error on manifest mismatch

[leineveber]

I'm using React Router as a...

framework

Reproduction

Not sure if reproduction link is providable here

System Info

System:
    OS: macOS 15.3.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.53 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.4.0 - ~/.nvm/versions/node/v22.4.0/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.1 - ~/.nvm/versions/node/v22.4.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 134.0.6998.45
    Safari: 18.3.1
  npmPackages:
    @react-router/dev: ^7.4.0 => 7.4.0 
    @react-router/express: ^7.4.0 => 7.4.0 
    @react-router/node: ^7.4.0 => 7.4.0 
    @react-router/remix-routes-option-adapter: ^7.4.0 => 7.4.0 
    react-router: ^7.4.0 => 7.4.0 
    vite: ^5.4.14 => 5.4.14

Used Package Manager

npm

Expected Behavior

RR7 doesn't throw an error of version mismatch.

Actual Behavior

The problem is when user uses website and we deploy a new change, instead of just reloading the page, RR7 throws error -> user sees "Error" page from ErrorBoundary for 0.5 sec and then the page reloads.

[leineveber]

just curious is it possible to disable reloading at all? we want to let users use the version of website without changes until they decide to reload the page on their own

[brophdawg11]

That was the original behavior but we had a lot of reports of new deploys resulting in updated JS asset chunking, and the new chunks from the updated manifest could contain duplicate copies of React causing the site to break in very unexpected (and very hard to debug) ways - see #12951 and remix-run/remix#10455.

I don't think the error boundary displaying is expected though so we can look into that.

[yoni-noma]

@brophdawg11 the error is displayed on the error boundary for users! i have recorings of that, i was just trying to figure out how i can detect this error and at least change the text

[hasanayan]

Yeah, we have this case of manifest mismatch errors being shown to users, too.

[leineveber]

currently patched library to disable fow

[hasanayan]

@leineveber could you please share your patch?

[leineveber]

@hasanayan
I've patched everything in node_modules/react-router that contains "isFogOfWarEnabled"

Patch

index 340c694..f9214a7 100644
--- a/node_modules/react-router/dist/development/chunk-GNGMS2XR.mjs
+++ b/node_modules/react-router/dist/development/chunk-GNGMS2XR.mjs
@@ -6873,7 +6873,7 @@ var discoveredPathsMaxSize = 1e3;
 var discoveredPaths = /* @__PURE__ */ new Set();
 var URL_LIMIT = 7680;
 function isFogOfWarEnabled(ssr) {
-  return ssr === true;
+  return false;
 }
 function getPartialManifest(manifest, router) {
   let routeIds = new Set(router.state.matches.map((m) => m.route.id));
diff --git a/node_modules/react-router/dist/development/dom-export.js b/node_modules/react-router/dist/development/dom-export.js
index 84313cc..4295b11 100644
--- a/node_modules/react-router/dist/development/dom-export.js
+++ b/node_modules/react-router/dist/development/dom-export.js
@@ -5341,7 +5341,7 @@ var discoveredPathsMaxSize = 1e3;
 var discoveredPaths = /* @__PURE__ */ new Set();
 var URL_LIMIT = 7680;
 function isFogOfWarEnabled(ssr) {
-  return ssr === true;
+  return false;
 }
 function getPartialManifest(manifest, router2) {
   let routeIds = new Set(router2.state.matches.map((m) => m.route.id));
diff --git a/node_modules/react-router/dist/development/index.js b/node_modules/react-router/dist/development/index.js
index 9db7d29..5734cf2 100644
--- a/node_modules/react-router/dist/development/index.js
+++ b/node_modules/react-router/dist/development/index.js
@@ -7021,7 +7021,7 @@ var discoveredPathsMaxSize = 1e3;
 var discoveredPaths = /* @__PURE__ */ new Set();
 var URL_LIMIT = 7680;
 function isFogOfWarEnabled(ssr) {
-  return ssr === true;
+  return false;
 }
 function getPartialManifest(manifest, router) {
   let routeIds = new Set(router.state.matches.map((m) => m.route.id));
diff --git a/node_modules/react-router/dist/production/chunk-SXJRHUAY.mjs b/node_modules/react-router/dist/production/chunk-SXJRHUAY.mjs
index 66420d1..5d0b99f 100644
--- a/node_modules/react-router/dist/production/chunk-SXJRHUAY.mjs
+++ b/node_modules/react-router/dist/production/chunk-SXJRHUAY.mjs
@@ -6873,7 +6873,7 @@ var discoveredPathsMaxSize = 1e3;
 var discoveredPaths = /* @__PURE__ */ new Set();
 var URL_LIMIT = 7680;
 function isFogOfWarEnabled(ssr) {
-  return ssr === true;
+  return false;
 }
 function getPartialManifest(manifest, router) {
   let routeIds = new Set(router.state.matches.map((m) => m.route.id));
diff --git a/node_modules/react-router/dist/production/dom-export.js b/node_modules/react-router/dist/production/dom-export.js
index 3ea8dac..c1c0c3a 100644
--- a/node_modules/react-router/dist/production/dom-export.js
+++ b/node_modules/react-router/dist/production/dom-export.js
@@ -5341,7 +5341,7 @@ var discoveredPathsMaxSize = 1e3;
 var discoveredPaths = /* @__PURE__ */ new Set();
 var URL_LIMIT = 7680;
 function isFogOfWarEnabled(ssr) {
-  return ssr === true;
+  return false;
 }
 function getPartialManifest(manifest, router2) {
   let routeIds = new Set(router2.state.matches.map((m) => m.route.id));
diff --git a/node_modules/react-router/dist/production/index.js b/node_modules/react-router/dist/production/index.js
index fa0e817..a4ff5ec 100644
--- a/node_modules/react-router/dist/production/index.js
+++ b/node_modules/react-router/dist/production/index.js
@@ -7021,7 +7021,7 @@ var discoveredPathsMaxSize = 1e3;
 var discoveredPaths = /* @__PURE__ */ new Set();
 var URL_LIMIT = 7680;
 function isFogOfWarEnabled(ssr) {
-  return ssr === true;
+  return false;
 }
 function getPartialManifest(manifest, router) {
   let routeIds = new Set(router.state.matches.map((m) => m.route.id));

[mkuklis]

Just did the same as @leineveber (thanks for sharing that patch).

[s-abstract]

@hasanayan I've patched everything in node_modules/react-router that contains "isFogOfWarEnabled"

Patch

This patch can cause a hydration error when deployed, works well locally though

[leineveber]

@hasanayan I've patched everything in node_modules/react-router that contains "isFogOfWarEnabled"
Patch

This patch can cause a hydration error when deployed, works well locally though

file names might be different due to different version of RR that I've used, just patch every file you find in RR directory that contains function "isFogOfWarEnabled"
I had errors too without patching every file