Detect lazy route discovery manifest version mismatches and trigger r…

…eloads
remix-run · Feb 19, 2025 · 451e1f6 · 451e1f6
1 parent 283fa44
commit 451e1f6
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/packages/react-router/lib/dom/ssr/fog-of-war.ts b/packages/react-router/lib/dom/ssr/fog-of-war.ts
@@ -84,6 +84,7 @@ export function getPatchRoutesOnNavigationFunction(
     }
     await fetchAndApplyManifestPatches(
       [path],
+      true,
       manifest,
       routeModules,
       ssr,
@@ -149,6 +150,7 @@ export function useFogOFWarDiscovery(
       try {
         await fetchAndApplyManifestPatches(
           lazyPaths,
+          false,
           manifest,
           routeModules,
           ssr,
@@ -183,6 +185,7 @@ export function useFogOFWarDiscovery(
 
 export async function fetchAndApplyManifestPatches(
   paths: string[],
+  reloadOnVersionMismatch: boolean,
   manifest: AssetsManifest,
   routeModules: RouteModules,
   ssr: boolean,
@@ -213,6 +216,27 @@ export async function fetchAndApplyManifestPatches(
 
     if (!res.ok) {
       throw new Error(`${res.status} ${res.statusText}`);
+    } else if (
+      res.status === 204 &&
+      res.headers.has("X-Remix-Reload-Document")
+    ) {
+      if (reloadOnVersionMismatch) {
+        window.location.href = paths[0];
+        throw new Error("Detected manifest version mismatch, reloading...");
+      } else {
+        // No-op during eager route discovery so we will trigger a hard reload
+        // of the destination during the next navigation instead of reloading
+        // while the user is sitting on the current page.  Works almost seamlessly
+        // on navigations, but may be slightly more disruptive on fetcher calls.
+        // Still Bbtter than the `React.useContext` error that occurs without
+        // this detection though...
+        console.warn(
+          "Detected a manifest version mismatch during eager route discovery. " +
+            "The next navigation will result in a new document navigation to sync " +
+            "up with the latest manifest."
+        );
+        return;
+      }
     } else if (res.status >= 400) {
       throw new Error(await res.text());
     }

diff --git a/packages/react-router/lib/server-runtime/server.ts b/packages/react-router/lib/server-runtime/server.ts
@@ -296,6 +296,15 @@ async function handleManifestRequest(
   routes: ServerRoute[],
   url: URL
 ) {
+  if (build.assets.version !== url.searchParams.get("version")) {
+    return new Response(null, {
+      status: 204,
+      headers: {
+        "X-Remix-Reload-Document": "true",
+      },
+    });
+  }
+
   let patches: Record<string, EntryRoute> = {};
 
   if (url.searchParams.has("p")) {