@tanstack/react-router 1.12.5 → 1.12.7

package/dist/cjs/lazyRouteComponent.cjs

@@ -18,20 +18,47 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+function isModuleNotFoundError(error) {
+  return typeof (error == null ? void 0 : error.message) === "string" && /Failed to fetch dynamically imported module/.test(error.message);
+}
 function lazyRouteComponent(importer, exportName) {
   let loadPromise;
   const load = () => {
     if (!loadPromise) {
-      loadPromise = importer();
+      loadPromise = importer().catch((error) => {
+        if (isModuleNotFoundError(error)) {
+          loadPromise.moduleNotFoundError = error;
+          return null;
+        }
+        throw error;
+      });
     }
     return loadPromise;
   };
   const lazyComp = React__namespace.lazy(async () => {
-    const moduleExports = await load();
-    const comp = moduleExports[exportName ?? "default"];
-    return {
-      default: comp
-    };
+    try {
+      const promise = load();
+      if (promise.moduleNotFoundError) {
+        throw promise.moduleNotFoundError;
+      }
+      const moduleExports = await promise;
+      const comp = moduleExports[exportName ?? "default"];
+      return {
+        default: comp
+      };
+    } catch (error) {
+      if (error instanceof Error && isModuleNotFoundError(error) && typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+        const storageKey = `tanstack_router_reload:${error.message}`;
+        if (!sessionStorage.getItem(storageKey)) {
+          sessionStorage.setItem(storageKey, "1");
+          window.location.reload();
+          return {
+            default: () => null
+          };
+        }
+      }
+      throw error;
+    }
   });
   lazyComp.preload = load;
   return lazyComp;

package/dist/cjs/lazyRouteComponent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AsyncRouteComponent } from './route'\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any>\n\n  const load = () => {\n    if (!loadPromise) {\n      loadPromise = importer()\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = React.lazy(async () => {\n    const moduleExports = await load()\n    const comp = moduleExports[exportName ?? 'default']\n    return {\n      default: comp,\n    }\n  })\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAGgB,SAAA,mBAId,UACA,YAGQ;AACJ,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS;AAAA,IACzB;AAEO,WAAA;AAAA,EAAA;AAGH,QAAA,WAAWA,iBAAM,KAAK,YAAY;AAChC,UAAA,gBAAgB,MAAM;AACtB,UAAA,OAAO,cAAc,cAAc,SAAS;AAC3C,WAAA;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EACX,CACD;AACC,WAAiB,UAAU;AAEtB,SAAA;AACT;;"}
+{"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  return (\n    typeof error?.message === 'string' &&\n    /Failed to fetch dynamically imported module/.test(error.message)\n  )\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> & {\n    moduleNotFoundError?: Error\n  }\n\n  const load = () => {\n    if (!loadPromise) {\n      loadPromise = importer().catch((error) => {\n        if (isModuleNotFoundError(error)) {\n          // We don't want an error thrown from preload in this case, because\n          // there's nothing we want to do about module not found during preload.\n          // Record the error, recover the promise with a null return,\n          // and we will attempt module not found resolution during the render path.\n\n          loadPromise.moduleNotFoundError = error\n\n          return null\n        }\n        throw error\n      })\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = React.lazy(async () => {\n    try {\n      const promise = load()\n\n      // Now that we're out of preload and into actual render path,\n      // throw the error if it was a module not found error during preload\n      if (promise.moduleNotFoundError) {\n        throw promise.moduleNotFoundError\n      }\n      const moduleExports = await promise\n\n      const comp = moduleExports[exportName ?? 'default']\n      return {\n        default: comp,\n      }\n    } catch (error) {\n      if (\n        error instanceof Error &&\n        isModuleNotFoundError(error) &&\n        typeof window !== 'undefined' &&\n        typeof sessionStorage !== 'undefined'\n      ) {\n        // Again, we want to reload one time on module not found error and not enter\n        // a reload loop if there is some other issue besides an old deploy.\n        // That's why we store our reload attempt in sessionStorage.\n        // Use error.message as key because it contains the module path that failed.\n        const storageKey = `tanstack_router_reload:${error.message}`\n        if (!sessionStorage.getItem(storageKey)) {\n          sessionStorage.setItem(storageKey, '1')\n          window.location.reload()\n\n          // Return empty component while we wait for window to reload\n          return {\n            default: () => null,\n          }\n        }\n      }\n      throw error\n    }\n  })\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAQA,SAAS,sBAAsB,OAAqB;AAClD,SACE,QAAO,+BAAO,aAAY,YAC1B,8CAA8C,KAAK,MAAM,OAAO;AAEpE;AAEgB,SAAA,mBAId,UACA,YAGQ;AACJ,MAAA;AAIJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EAAE,MAAM,CAAC,UAAU;AACpC,YAAA,sBAAsB,KAAK,GAAG;AAMhC,sBAAY,sBAAsB;AAE3B,iBAAA;AAAA,QACT;AACM,cAAA;AAAA,MAAA,CACP;AAAA,IACH;AAEO,WAAA;AAAA,EAAA;AAGH,QAAA,WAAWA,iBAAM,KAAK,YAAY;AAClC,QAAA;AACF,YAAM,UAAU;AAIhB,UAAI,QAAQ,qBAAqB;AAC/B,cAAM,QAAQ;AAAA,MAChB;AACA,YAAM,gBAAgB,MAAM;AAEtB,YAAA,OAAO,cAAc,cAAc,SAAS;AAC3C,aAAA;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,aAEJ,OAAO;AAEZ,UAAA,iBAAiB,SACjB,sBAAsB,KAAK,KAC3B,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,cAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,YAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,yBAAA,QAAQ,YAAY,GAAG;AACtC,iBAAO,SAAS;AAGT,iBAAA;AAAA,YACL,SAAS,MAAM;AAAA,UAAA;AAAA,QAEnB;AAAA,MACF;AACM,YAAA;AAAA,IACR;AAAA,EAAA,CACD;AAEC,WAAiB,UAAU;AAEtB,SAAA;AACT;;"}

package/dist/esm/lazyRouteComponent.js

@@ -1,18 +1,45 @@
 import * as React from "react";
+function isModuleNotFoundError(error) {
+  return typeof (error == null ? void 0 : error.message) === "string" && /Failed to fetch dynamically imported module/.test(error.message);
+}
 function lazyRouteComponent(importer, exportName) {
   let loadPromise;
   const load = () => {
     if (!loadPromise) {
-      loadPromise = importer();
+      loadPromise = importer().catch((error) => {
+        if (isModuleNotFoundError(error)) {
+          loadPromise.moduleNotFoundError = error;
+          return null;
+        }
+        throw error;
+      });
     }
     return loadPromise;
   };
   const lazyComp = React.lazy(async () => {
-    const moduleExports = await load();
-    const comp = moduleExports[exportName ?? "default"];
-    return {
-      default: comp
-    };
+    try {
+      const promise = load();
+      if (promise.moduleNotFoundError) {
+        throw promise.moduleNotFoundError;
+      }
+      const moduleExports = await promise;
+      const comp = moduleExports[exportName ?? "default"];
+      return {
+        default: comp
+      };
+    } catch (error) {
+      if (error instanceof Error && isModuleNotFoundError(error) && typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
+        const storageKey = `tanstack_router_reload:${error.message}`;
+        if (!sessionStorage.getItem(storageKey)) {
+          sessionStorage.setItem(storageKey, "1");
+          window.location.reload();
+          return {
+            default: () => null
+          };
+        }
+      }
+      throw error;
+    }
   });
   lazyComp.preload = load;
   return lazyComp;

package/dist/esm/lazyRouteComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AsyncRouteComponent } from './route'\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any>\n\n  const load = () => {\n    if (!loadPromise) {\n      loadPromise = importer()\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = React.lazy(async () => {\n    const moduleExports = await load()\n    const comp = moduleExports[exportName ?? 'default']\n    return {\n      default: comp,\n    }\n  })\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":[],"mappings":";AAGgB,SAAA,mBAId,UACA,YAGQ;AACJ,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS;AAAA,IACzB;AAEO,WAAA;AAAA,EAAA;AAGH,QAAA,WAAW,MAAM,KAAK,YAAY;AAChC,UAAA,gBAAgB,MAAM;AACtB,UAAA,OAAO,cAAc,cAAc,SAAS;AAC3C,WAAA;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EACX,CACD;AACC,WAAiB,UAAU;AAEtB,SAAA;AACT;"}
+{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { AsyncRouteComponent } from './route'\n\n// If the load fails due to module not found, it may mean a new version of\n// the build was deployed and the user's browser is still using an old version.\n// If this happens, the old version in the user's browser would have an outdated\n// URL to the lazy module.\n// In that case, we want to attempt one window refresh to get the latest.\nfunction isModuleNotFoundError(error: any): boolean {\n  return (\n    typeof error?.message === 'string' &&\n    /Failed to fetch dynamically imported module/.test(error.message)\n  )\n}\n\nexport function lazyRouteComponent<\n  T extends Record<string, any>,\n  TKey extends keyof T = 'default',\n>(\n  importer: () => Promise<T>,\n  exportName?: TKey,\n): T[TKey] extends (props: infer TProps) => any\n  ? AsyncRouteComponent<TProps>\n  : never {\n  let loadPromise: Promise<any> & {\n    moduleNotFoundError?: Error\n  }\n\n  const load = () => {\n    if (!loadPromise) {\n      loadPromise = importer().catch((error) => {\n        if (isModuleNotFoundError(error)) {\n          // We don't want an error thrown from preload in this case, because\n          // there's nothing we want to do about module not found during preload.\n          // Record the error, recover the promise with a null return,\n          // and we will attempt module not found resolution during the render path.\n\n          loadPromise.moduleNotFoundError = error\n\n          return null\n        }\n        throw error\n      })\n    }\n\n    return loadPromise\n  }\n\n  const lazyComp = React.lazy(async () => {\n    try {\n      const promise = load()\n\n      // Now that we're out of preload and into actual render path,\n      // throw the error if it was a module not found error during preload\n      if (promise.moduleNotFoundError) {\n        throw promise.moduleNotFoundError\n      }\n      const moduleExports = await promise\n\n      const comp = moduleExports[exportName ?? 'default']\n      return {\n        default: comp,\n      }\n    } catch (error) {\n      if (\n        error instanceof Error &&\n        isModuleNotFoundError(error) &&\n        typeof window !== 'undefined' &&\n        typeof sessionStorage !== 'undefined'\n      ) {\n        // Again, we want to reload one time on module not found error and not enter\n        // a reload loop if there is some other issue besides an old deploy.\n        // That's why we store our reload attempt in sessionStorage.\n        // Use error.message as key because it contains the module path that failed.\n        const storageKey = `tanstack_router_reload:${error.message}`\n        if (!sessionStorage.getItem(storageKey)) {\n          sessionStorage.setItem(storageKey, '1')\n          window.location.reload()\n\n          // Return empty component while we wait for window to reload\n          return {\n            default: () => null,\n          }\n        }\n      }\n      throw error\n    }\n  })\n\n  ;(lazyComp as any).preload = load\n\n  return lazyComp as any\n}\n"],"names":[],"mappings":";AAQA,SAAS,sBAAsB,OAAqB;AAClD,SACE,QAAO,+BAAO,aAAY,YAC1B,8CAA8C,KAAK,MAAM,OAAO;AAEpE;AAEgB,SAAA,mBAId,UACA,YAGQ;AACJ,MAAA;AAIJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EAAE,MAAM,CAAC,UAAU;AACpC,YAAA,sBAAsB,KAAK,GAAG;AAMhC,sBAAY,sBAAsB;AAE3B,iBAAA;AAAA,QACT;AACM,cAAA;AAAA,MAAA,CACP;AAAA,IACH;AAEO,WAAA;AAAA,EAAA;AAGH,QAAA,WAAW,MAAM,KAAK,YAAY;AAClC,QAAA;AACF,YAAM,UAAU;AAIhB,UAAI,QAAQ,qBAAqB;AAC/B,cAAM,QAAQ;AAAA,MAChB;AACA,YAAM,gBAAgB,MAAM;AAEtB,YAAA,OAAO,cAAc,cAAc,SAAS;AAC3C,aAAA;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,aAEJ,OAAO;AAEZ,UAAA,iBAAiB,SACjB,sBAAsB,KAAK,KAC3B,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,cAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,YAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,yBAAA,QAAQ,YAAY,GAAG;AACtC,iBAAO,SAAS;AAGT,iBAAA;AAAA,YACL,SAAS,MAAM;AAAA,UAAA;AAAA,QAEnB;AAAA,MACF;AACM,YAAA;AAAA,IACR;AAAA,EAAA,CACD;AAEC,WAAiB,UAAU;AAEtB,SAAA;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.12.5",
+  "version": "1.12.7",
   "description": "",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/lazyRouteComponent.tsx

@@ -1,6 +1,18 @@
 import * as React from 'react'
 import { AsyncRouteComponent } from './route'
 
+// If the load fails due to module not found, it may mean a new version of
+// the build was deployed and the user's browser is still using an old version.
+// If this happens, the old version in the user's browser would have an outdated
+// URL to the lazy module.
+// In that case, we want to attempt one window refresh to get the latest.
+function isModuleNotFoundError(error: any): boolean {
+  return (
+    typeof error?.message === 'string' &&
+    /Failed to fetch dynamically imported module/.test(error.message)
+  )
+}
+
 export function lazyRouteComponent<
   T extends Record<string, any>,
   TKey extends keyof T = 'default',
@@ -10,23 +22,71 @@ export function lazyRouteComponent<
 ): T[TKey] extends (props: infer TProps) => any
   ? AsyncRouteComponent<TProps>
   : never {
-  let loadPromise: Promise<any>
+  let loadPromise: Promise<any> & {
+    moduleNotFoundError?: Error
+  }
 
   const load = () => {
     if (!loadPromise) {
-      loadPromise = importer()
+      loadPromise = importer().catch((error) => {
+        if (isModuleNotFoundError(error)) {
+          // We don't want an error thrown from preload in this case, because
+          // there's nothing we want to do about module not found during preload.
+          // Record the error, recover the promise with a null return,
+          // and we will attempt module not found resolution during the render path.
+
+          loadPromise.moduleNotFoundError = error
+
+          return null
+        }
+        throw error
+      })
     }
 
     return loadPromise
   }
 
   const lazyComp = React.lazy(async () => {
-    const moduleExports = await load()
-    const comp = moduleExports[exportName ?? 'default']
-    return {
-      default: comp,
+    try {
+      const promise = load()
+
+      // Now that we're out of preload and into actual render path,
+      // throw the error if it was a module not found error during preload
+      if (promise.moduleNotFoundError) {
+        throw promise.moduleNotFoundError
+      }
+      const moduleExports = await promise
+
+      const comp = moduleExports[exportName ?? 'default']
+      return {
+        default: comp,
+      }
+    } catch (error) {
+      if (
+        error instanceof Error &&
+        isModuleNotFoundError(error) &&
+        typeof window !== 'undefined' &&
+        typeof sessionStorage !== 'undefined'
+      ) {
+        // Again, we want to reload one time on module not found error and not enter
+        // a reload loop if there is some other issue besides an old deploy.
+        // That's why we store our reload attempt in sessionStorage.
+        // Use error.message as key because it contains the module path that failed.
+        const storageKey = `tanstack_router_reload:${error.message}`
+        if (!sessionStorage.getItem(storageKey)) {
+          sessionStorage.setItem(storageKey, '1')
+          window.location.reload()
+
+          // Return empty component while we wait for window to reload
+          return {
+            default: () => null,
+          }
+        }
+      }
+      throw error
     }
   })
+
   ;(lazyComp as any).preload = load
 
   return lazyComp as any