@tanstack/react-router 1.97.24 → 1.97.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -21,7 +21,8 @@ function _interopNamespaceDefault(e) {
21
21
  }
22
22
  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
23
23
  function isModuleNotFoundError(error) {
24
- return typeof (error == null ? void 0 : error.message) === "string" && /Failed to fetch dynamically imported module/.test(error.message);
24
+ if (typeof (error == null ? void 0 : error.message) !== "string") return false;
25
+ return error.message.startsWith("Failed to fetch dynamically imported module") || error.message.startsWith("error loading dynamically imported module") || error.message.startsWith("Importing a module script failed");
25
26
  }
26
27
  function ClientOnly({
27
28
  children,
@@ -44,6 +45,7 @@ function lazyRouteComponent(importer, exportName, ssr) {
44
45
  let loadPromise;
45
46
  let comp;
46
47
  let error;
48
+ let reload;
47
49
  const load = () => {
48
50
  if (typeof document === "undefined" && (ssr == null ? void 0 : ssr()) === false) {
49
51
  comp = () => null;
@@ -55,24 +57,26 @@ function lazyRouteComponent(importer, exportName, ssr) {
55
57
  comp = res[exportName ?? "default"];
56
58
  }).catch((err) => {
57
59
  error = err;
60
+ if (isModuleNotFoundError(error)) {
61
+ if (error instanceof Error && typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
62
+ const storageKey = `tanstack_router_reload:${error.message}`;
63
+ if (!sessionStorage.getItem(storageKey)) {
64
+ sessionStorage.setItem(storageKey, "1");
65
+ reload = true;
66
+ }
67
+ }
68
+ }
58
69
  });
59
70
  }
60
71
  return loadPromise;
61
72
  };
62
73
  const lazyComp = function Lazy(props) {
74
+ if (reload) {
75
+ window.location.reload();
76
+ throw new Promise(() => {
77
+ });
78
+ }
63
79
  if (error) {
64
- if (isModuleNotFoundError(error)) {
65
- if (error instanceof Error && typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
66
- const storageKey = `tanstack_router_reload:${error.message}`;
67
- if (!sessionStorage.getItem(storageKey)) {
68
- sessionStorage.setItem(storageKey, "1");
69
- window.location.reload();
70
- return {
71
- default: () => null
72
- };
73
- }
74
- }
75
- }
76
80
  throw error;
77
81
  }
78
82
  if (!comp) {
@@ -1 +1 @@
1
- {"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport type { 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 ClientOnly({\n children,\n fallback = null,\n}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {\n return useHydrated() ? <>{children}</> : <>{fallback}</>\n}\n\nfunction subscribe() {\n return () => {}\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\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 ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n ? AsyncRouteComponent<TProps>\n : never {\n let loadPromise: Promise<any> | undefined\n let comp: T[TKey] | T['default']\n let error: any\n\n const load = () => {\n if (typeof document === 'undefined' && ssr?.() === false) {\n comp = (() => null) as any\n return Promise.resolve()\n }\n if (!loadPromise) {\n loadPromise = importer()\n .then((res) => {\n loadPromise = undefined\n comp = res[exportName ?? 'default']\n })\n .catch((err) => {\n error = err\n })\n }\n\n return loadPromise\n }\n\n const lazyComp = function Lazy(props: any) {\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 (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 if (\n error instanceof 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 }\n\n // Otherwise, just throw the error\n throw error\n }\n\n if (!comp) {\n throw load()\n }\n\n if (ssr?.() === false) {\n return (\n <ClientOnly fallback={<Outlet />}>\n {React.createElement(comp, props)}\n </ClientOnly>\n )\n }\n return React.createElement(comp, props)\n }\n\n ;(lazyComp as any).preload = load\n\n return lazyComp as any\n}\n"],"names":["jsx","Fragment","React","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,SAAS,sBAAsB,OAAqB;AAClD,SACE,QAAO,+BAAO,aAAY,YAC1B,8CAA8C,KAAK,MAAM,OAAO;AAEpE;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AACb,GAA4D;AAC1D,SAAO,YAAgB,IAAAA,+BAAAC,WAAAA,UAAA,EAAG,SAAS,CAAA,0DAAS,UAAS,SAAA,CAAA;AACvD;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAOC,iBAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AACN,gBAAA;AAAA,MAAA,CACT;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAGzC,QAAI,OAAO;AACL,UAAA,sBAAsB,KAAK,GAAG;AAMhC,YACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,gBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,cAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,2BAAA,QAAQ,YAAY,GAAG;AACtC,mBAAO,SAAS,OAAO;AAGhB,mBAAA;AAAA,cACL,SAAS,MAAM;AAAA,YACjB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAII,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAAF,2BAAA,IAAC,YAAW,EAAA,UAAWA,2BAAAA,IAAAG,MAAAA,QAAA,CAAA,CAAO,GAC3B,UAAMD,iBAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAAA,iBAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;;;;"}
1
+ {"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport type { 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 // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n // safari: \"Importing a module script failed.\"\n if (typeof error?.message !== 'string') return false\n return (\n error.message.startsWith('Failed to fetch dynamically imported module') ||\n error.message.startsWith('error loading dynamically imported module') ||\n error.message.startsWith('Importing a module script failed')\n )\n}\n\nexport function ClientOnly({\n children,\n fallback = null,\n}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {\n return useHydrated() ? <>{children}</> : <>{fallback}</>\n}\n\nfunction subscribe() {\n return () => {}\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\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 ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n ? AsyncRouteComponent<TProps>\n : never {\n let loadPromise: Promise<any> | undefined\n let comp: T[TKey] | T['default']\n let error: any\n let reload: boolean\n\n const load = () => {\n if (typeof document === 'undefined' && ssr?.() === false) {\n comp = (() => null) as any\n return Promise.resolve()\n }\n if (!loadPromise) {\n loadPromise = importer()\n .then((res) => {\n loadPromise = undefined\n comp = res[exportName ?? 'default']\n })\n .catch((err) => {\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, the rest is handled during the render path.\n error = err\n if (isModuleNotFoundError(error)) {\n if (\n error instanceof 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 reload = true\n }\n }\n }\n })\n }\n\n return loadPromise\n }\n\n const lazyComp = function Lazy(props: any) {\n // Now that we're out of preload and into actual render path,\n if (reload) {\n // If it was a module loading error,\n // throw eternal suspense while we wait for window to reload\n window.location.reload()\n throw new Promise(() => {})\n }\n if (error) {\n // Otherwise, just throw the error\n throw error\n }\n\n if (!comp) {\n throw load()\n }\n\n if (ssr?.() === false) {\n return (\n <ClientOnly fallback={<Outlet />}>\n {React.createElement(comp, props)}\n </ClientOnly>\n )\n }\n return React.createElement(comp, props)\n }\n\n ;(lazyComp as any).preload = load\n\n return lazyComp as any\n}\n"],"names":["jsx","Fragment","React","Outlet"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,SAAS,sBAAsB,OAAqB;AAIlD,MAAI,QAAO,+BAAO,aAAY,SAAiB,QAAA;AAC/C,SACE,MAAM,QAAQ,WAAW,6CAA6C,KACtE,MAAM,QAAQ,WAAW,2CAA2C,KACpE,MAAM,QAAQ,WAAW,kCAAkC;AAE/D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AACb,GAA4D;AAC1D,SAAO,YAAgB,IAAAA,+BAAAC,WAAAA,UAAA,EAAG,SAAS,CAAA,0DAAS,UAAS,SAAA,CAAA;AACvD;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAOC,iBAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AAIN,gBAAA;AACJ,YAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,kBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,6BAAA,QAAQ,YAAY,GAAG;AAC7B,uBAAA;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAO;AACjB,YAAA,IAAI,QAAQ,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAE5B,QAAI,OAAO;AAEH,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAAF,2BAAA,IAAC,YAAW,EAAA,UAAWA,2BAAAA,IAAAG,MAAAA,QAAA,CAAA,CAAO,GAC3B,UAAMD,iBAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAAA,iBAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;;;;"}
@@ -2,7 +2,8 @@ import { jsx, Fragment } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
3
  import { Outlet } from "./Match.js";
4
4
  function isModuleNotFoundError(error) {
5
- return typeof (error == null ? void 0 : error.message) === "string" && /Failed to fetch dynamically imported module/.test(error.message);
5
+ if (typeof (error == null ? void 0 : error.message) !== "string") return false;
6
+ return error.message.startsWith("Failed to fetch dynamically imported module") || error.message.startsWith("error loading dynamically imported module") || error.message.startsWith("Importing a module script failed");
6
7
  }
7
8
  function ClientOnly({
8
9
  children,
@@ -25,6 +26,7 @@ function lazyRouteComponent(importer, exportName, ssr) {
25
26
  let loadPromise;
26
27
  let comp;
27
28
  let error;
29
+ let reload;
28
30
  const load = () => {
29
31
  if (typeof document === "undefined" && (ssr == null ? void 0 : ssr()) === false) {
30
32
  comp = () => null;
@@ -36,24 +38,26 @@ function lazyRouteComponent(importer, exportName, ssr) {
36
38
  comp = res[exportName ?? "default"];
37
39
  }).catch((err) => {
38
40
  error = err;
41
+ if (isModuleNotFoundError(error)) {
42
+ if (error instanceof Error && typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
43
+ const storageKey = `tanstack_router_reload:${error.message}`;
44
+ if (!sessionStorage.getItem(storageKey)) {
45
+ sessionStorage.setItem(storageKey, "1");
46
+ reload = true;
47
+ }
48
+ }
49
+ }
39
50
  });
40
51
  }
41
52
  return loadPromise;
42
53
  };
43
54
  const lazyComp = function Lazy(props) {
55
+ if (reload) {
56
+ window.location.reload();
57
+ throw new Promise(() => {
58
+ });
59
+ }
44
60
  if (error) {
45
- if (isModuleNotFoundError(error)) {
46
- if (error instanceof Error && typeof window !== "undefined" && typeof sessionStorage !== "undefined") {
47
- const storageKey = `tanstack_router_reload:${error.message}`;
48
- if (!sessionStorage.getItem(storageKey)) {
49
- sessionStorage.setItem(storageKey, "1");
50
- window.location.reload();
51
- return {
52
- default: () => null
53
- };
54
- }
55
- }
56
- }
57
61
  throw error;
58
62
  }
59
63
  if (!comp) {
@@ -1 +1 @@
1
- {"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport type { 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 ClientOnly({\n children,\n fallback = null,\n}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {\n return useHydrated() ? <>{children}</> : <>{fallback}</>\n}\n\nfunction subscribe() {\n return () => {}\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\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 ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n ? AsyncRouteComponent<TProps>\n : never {\n let loadPromise: Promise<any> | undefined\n let comp: T[TKey] | T['default']\n let error: any\n\n const load = () => {\n if (typeof document === 'undefined' && ssr?.() === false) {\n comp = (() => null) as any\n return Promise.resolve()\n }\n if (!loadPromise) {\n loadPromise = importer()\n .then((res) => {\n loadPromise = undefined\n comp = res[exportName ?? 'default']\n })\n .catch((err) => {\n error = err\n })\n }\n\n return loadPromise\n }\n\n const lazyComp = function Lazy(props: any) {\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 (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 if (\n error instanceof 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 }\n\n // Otherwise, just throw the error\n throw error\n }\n\n if (!comp) {\n throw load()\n }\n\n if (ssr?.() === false) {\n return (\n <ClientOnly fallback={<Outlet />}>\n {React.createElement(comp, props)}\n </ClientOnly>\n )\n }\n return React.createElement(comp, props)\n }\n\n ;(lazyComp as any).preload = load\n\n return lazyComp as any\n}\n"],"names":[],"mappings":";;;AASA,SAAS,sBAAsB,OAAqB;AAClD,SACE,QAAO,+BAAO,aAAY,YAC1B,8CAA8C,KAAK,MAAM,OAAO;AAEpE;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AACb,GAA4D;AAC1D,SAAO,YAAgB,IAAA,oBAAA,UAAA,EAAG,SAAS,CAAA,oCAAS,UAAS,SAAA,CAAA;AACvD;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAO,MAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AACN,gBAAA;AAAA,MAAA,CACT;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAGzC,QAAI,OAAO;AACL,UAAA,sBAAsB,KAAK,GAAG;AAMhC,YACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,gBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,cAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,2BAAA,QAAQ,YAAY,GAAG;AACtC,mBAAO,SAAS,OAAO;AAGhB,mBAAA;AAAA,cACL,SAAS,MAAM;AAAA,YACjB;AAAA,UAAA;AAAA,QACF;AAAA,MACF;AAII,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAA,oBAAC,YAAW,EAAA,UAAW,oBAAA,QAAA,CAAA,CAAO,GAC3B,UAAM,MAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAA,MAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;"}
1
+ {"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Outlet } from './Match'\nimport type { 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 // chrome: \"Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n // firefox: \"error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split\"\n // safari: \"Importing a module script failed.\"\n if (typeof error?.message !== 'string') return false\n return (\n error.message.startsWith('Failed to fetch dynamically imported module') ||\n error.message.startsWith('error loading dynamically imported module') ||\n error.message.startsWith('Importing a module script failed')\n )\n}\n\nexport function ClientOnly({\n children,\n fallback = null,\n}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {\n return useHydrated() ? <>{children}</> : <>{fallback}</>\n}\n\nfunction subscribe() {\n return () => {}\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\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 ssr?: () => boolean,\n): T[TKey] extends (props: infer TProps) => any\n ? AsyncRouteComponent<TProps>\n : never {\n let loadPromise: Promise<any> | undefined\n let comp: T[TKey] | T['default']\n let error: any\n let reload: boolean\n\n const load = () => {\n if (typeof document === 'undefined' && ssr?.() === false) {\n comp = (() => null) as any\n return Promise.resolve()\n }\n if (!loadPromise) {\n loadPromise = importer()\n .then((res) => {\n loadPromise = undefined\n comp = res[exportName ?? 'default']\n })\n .catch((err) => {\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, the rest is handled during the render path.\n error = err\n if (isModuleNotFoundError(error)) {\n if (\n error instanceof 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 reload = true\n }\n }\n }\n })\n }\n\n return loadPromise\n }\n\n const lazyComp = function Lazy(props: any) {\n // Now that we're out of preload and into actual render path,\n if (reload) {\n // If it was a module loading error,\n // throw eternal suspense while we wait for window to reload\n window.location.reload()\n throw new Promise(() => {})\n }\n if (error) {\n // Otherwise, just throw the error\n throw error\n }\n\n if (!comp) {\n throw load()\n }\n\n if (ssr?.() === false) {\n return (\n <ClientOnly fallback={<Outlet />}>\n {React.createElement(comp, props)}\n </ClientOnly>\n )\n }\n return React.createElement(comp, props)\n }\n\n ;(lazyComp as any).preload = load\n\n return lazyComp as any\n}\n"],"names":[],"mappings":";;;AASA,SAAS,sBAAsB,OAAqB;AAIlD,MAAI,QAAO,+BAAO,aAAY,SAAiB,QAAA;AAC/C,SACE,MAAM,QAAQ,WAAW,6CAA6C,KACtE,MAAM,QAAQ,WAAW,2CAA2C,KACpE,MAAM,QAAQ,WAAW,kCAAkC;AAE/D;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,WAAW;AACb,GAA4D;AAC1D,SAAO,YAAgB,IAAA,oBAAA,UAAA,EAAG,SAAS,CAAA,oCAAS,UAAS,SAAA,CAAA;AACvD;AAEA,SAAS,YAAY;AACnB,SAAO,MAAM;AAAA,EAAC;AAChB;AAEO,SAAS,cAAc;AAC5B,SAAO,MAAM;AAAA,IACX;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEgB,SAAA,mBAId,UACA,YACA,KAGQ;AACJ,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,OAAO,aAAa,gBAAe,kCAAY,OAAO;AACxD,aAAQ,MAAM;AACd,aAAO,QAAQ,QAAQ;AAAA,IAAA;AAEzB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAS,EACpB,KAAK,CAAC,QAAQ;AACC,sBAAA;AACP,eAAA,IAAI,cAAc,SAAS;AAAA,MAAA,CACnC,EACA,MAAM,CAAC,QAAQ;AAIN,gBAAA;AACJ,YAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKM,kBAAA,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACxB,6BAAA,QAAQ,YAAY,GAAG;AAC7B,uBAAA;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF,CACD;AAAA,IAAA;AAGE,WAAA;AAAA,EACT;AAEM,QAAA,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAO;AACjB,YAAA,IAAI,QAAQ,MAAM;AAAA,MAAA,CAAE;AAAA,IAAA;AAE5B,QAAI,OAAO;AAEH,YAAA;AAAA,IAAA;AAGR,QAAI,CAAC,MAAM;AACT,YAAM,KAAK;AAAA,IAAA;AAGT,SAAA,kCAAY,OAAO;AAEnB,aAAA,oBAAC,YAAW,EAAA,UAAW,oBAAA,QAAA,CAAA,CAAO,GAC3B,UAAM,MAAA,cAAc,MAAM,KAAK,EAClC,CAAA;AAAA,IAAA;AAGG,WAAA,MAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAEtB,SAAA;AACT;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/react-router",
3
- "version": "1.97.24",
3
+ "version": "1.97.26",
4
4
  "description": "Modern and scalable routing for React applications",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -53,8 +53,8 @@
53
53
  "jsesc": "^3.1.0",
54
54
  "tiny-invariant": "^1.3.3",
55
55
  "tiny-warning": "^1.0.3",
56
- "@tanstack/history": "1.97.8",
57
- "@tanstack/router-core": "^1.97.24"
56
+ "@tanstack/router-core": "^1.97.25",
57
+ "@tanstack/history": "1.97.8"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@testing-library/jest-dom": "^6.6.3",
@@ -8,9 +8,14 @@ import type { AsyncRouteComponent } from './route'
8
8
  // URL to the lazy module.
9
9
  // In that case, we want to attempt one window refresh to get the latest.
10
10
  function isModuleNotFoundError(error: any): boolean {
11
+ // chrome: "Failed to fetch dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
12
+ // firefox: "error loading dynamically imported module: http://localhost:5173/src/routes/posts.index.tsx?tsr-split"
13
+ // safari: "Importing a module script failed."
14
+ if (typeof error?.message !== 'string') return false
11
15
  return (
12
- typeof error?.message === 'string' &&
13
- /Failed to fetch dynamically imported module/.test(error.message)
16
+ error.message.startsWith('Failed to fetch dynamically imported module') ||
17
+ error.message.startsWith('error loading dynamically imported module') ||
18
+ error.message.startsWith('Importing a module script failed')
14
19
  )
15
20
  }
16
21
 
@@ -46,6 +51,7 @@ export function lazyRouteComponent<
46
51
  let loadPromise: Promise<any> | undefined
47
52
  let comp: T[TKey] | T['default']
48
53
  let error: any
54
+ let reload: boolean
49
55
 
50
56
  const load = () => {
51
57
  if (typeof document === 'undefined' && ssr?.() === false) {
@@ -59,7 +65,27 @@ export function lazyRouteComponent<
59
65
  comp = res[exportName ?? 'default']
60
66
  })
61
67
  .catch((err) => {
68
+ // We don't want an error thrown from preload in this case, because
69
+ // there's nothing we want to do about module not found during preload.
70
+ // Record the error, the rest is handled during the render path.
62
71
  error = err
72
+ if (isModuleNotFoundError(error)) {
73
+ if (
74
+ error instanceof Error &&
75
+ typeof window !== 'undefined' &&
76
+ typeof sessionStorage !== 'undefined'
77
+ ) {
78
+ // Again, we want to reload one time on module not found error and not enter
79
+ // a reload loop if there is some other issue besides an old deploy.
80
+ // That's why we store our reload attempt in sessionStorage.
81
+ // Use error.message as key because it contains the module path that failed.
82
+ const storageKey = `tanstack_router_reload:${error.message}`
83
+ if (!sessionStorage.getItem(storageKey)) {
84
+ sessionStorage.setItem(storageKey, '1')
85
+ reload = true
86
+ }
87
+ }
88
+ }
63
89
  })
64
90
  }
65
91
 
@@ -68,36 +94,13 @@ export function lazyRouteComponent<
68
94
 
69
95
  const lazyComp = function Lazy(props: any) {
70
96
  // Now that we're out of preload and into actual render path,
71
- // throw the error if it was a module not found error during preload
97
+ if (reload) {
98
+ // If it was a module loading error,
99
+ // throw eternal suspense while we wait for window to reload
100
+ window.location.reload()
101
+ throw new Promise(() => {})
102
+ }
72
103
  if (error) {
73
- if (isModuleNotFoundError(error)) {
74
- // We don't want an error thrown from preload in this case, because
75
- // there's nothing we want to do about module not found during preload.
76
- // Record the error, recover the promise with a null return,
77
- // and we will attempt module not found resolution during the render path.
78
-
79
- if (
80
- error instanceof Error &&
81
- typeof window !== 'undefined' &&
82
- typeof sessionStorage !== 'undefined'
83
- ) {
84
- // Again, we want to reload one time on module not found error and not enter
85
- // a reload loop if there is some other issue besides an old deploy.
86
- // That's why we store our reload attempt in sessionStorage.
87
- // Use error.message as key because it contains the module path that failed.
88
- const storageKey = `tanstack_router_reload:${error.message}`
89
- if (!sessionStorage.getItem(storageKey)) {
90
- sessionStorage.setItem(storageKey, '1')
91
- window.location.reload()
92
-
93
- // Return empty component while we wait for window to reload
94
- return {
95
- default: () => null,
96
- }
97
- }
98
- }
99
- }
100
-
101
104
  // Otherwise, just throw the error
102
105
  throw error
103
106
  }