Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
leineveber opened this issue Mar 31, 2025 · 13 comments · Fixed by #13480
Closed

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

leineveber opened this issue Mar 31, 2025 · 13 comments · Fixed by #13480

Comments

@leineveber
Copy link

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

Image

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 leineveber added the bug label Mar 31, 2025
@leineveber
Copy link
Author

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
Copy link
Contributor

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
Copy link

@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
Copy link

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

@leineveber
Copy link
Author

leineveber commented Apr 3, 2025

currently patched library to disable fow

@hasanayan
Copy link

@leineveber could you please share your patch?

hasanayan added a commit to cerbos/react-router that referenced this issue Apr 3, 2025
@leineveber
Copy link
Author

leineveber commented Apr 3, 2025

@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
Copy link

mkuklis commented Apr 12, 2025

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

@s-abstract
Copy link

@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
Copy link
Author

@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

@s-abstract
Copy link

@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

I did patch every function (didn't copy yours) and it causes hydration errors, all I'm saying it's not an universal workaround so others are aware of it and it would be much appreciated to have the RR team's response on that issue

@brophdawg11
Copy link
Contributor

This should be resolved via #13480 which will prevent bubbling that error to an ErrorBoundary and causing a flash in the UI prior to the reload.

We are also planning to introduce a config option to disable this lazy route discovery feature in #13451 so keep an eye on that if you're prefer to disable it entirely.

@brophdawg11 brophdawg11 added the awaiting release This issue has been fixed and will be released soon label Apr 28, 2025
@brophdawg11 brophdawg11 removed their assignment Apr 28, 2025
Copy link
Contributor

github-actions bot commented May 8, 2025

🤖 Hello there,

We just published version 7.6.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

@github-actions github-actions bot removed the awaiting release This issue has been fixed and will be released soon label May 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants