@tanstack/react-router 1.147.0 → 1.147.2

package/dist/cjs/HeadContent.cjs

@@ -170,14 +170,14 @@ const useTags = () => {
   );
 };
 function DevStylesLink() {
-  useRouter.useRouter();
+  const router = useRouter.useRouter();
   const routeIds = useRouterState.useRouterState({
     select: (state) => state.matches.map((match) => match.routeId)
   });
   React__namespace.useEffect(() => {
     document.querySelectorAll("[data-tanstack-start-dev-styles]").forEach((el) => el.remove());
   }, []);
-  const href = `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds.join(","))}`;
+  const href = routerCore.buildDevStylesUrl(router.basepath, routeIds);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "link",
     {

package/dist/cjs/HeadContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeadContent.cjs","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { escapeHtml } from '@tanstack/router-core'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\n/**\n * Build the list of head/link/meta/script tags to render for active matches.\n * Used internally by `HeadContent`.\n */\nexport const useTags = () => {\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const routeMeta = useRouterState({\n    select: (state) => {\n      return state.matches.map((match) => match.meta!).filter(Boolean)\n    },\n  })\n\n  const meta: Array<RouterManagedTag> = React.useMemo(() => {\n    const resultMeta: Array<RouterManagedTag> = []\n    const metaByAttribute: Record<string, true> = {}\n    let title: RouterManagedTag | undefined\n    for (let i = routeMeta.length - 1; i >= 0; i--) {\n      const metas = routeMeta[i]!\n      for (let j = metas.length - 1; j >= 0; j--) {\n        const m = metas[j]\n        if (!m) continue\n\n        if (m.title) {\n          if (!title) {\n            title = {\n              tag: 'title',\n              children: m.title,\n            }\n          }\n        } else if ('script:ld+json' in m) {\n          // Handle JSON-LD structured data\n          // Content is HTML-escaped to prevent XSS when injected via dangerouslySetInnerHTML\n          try {\n            const json = JSON.stringify(m['script:ld+json'])\n            resultMeta.push({\n              tag: 'script',\n              attrs: {\n                type: 'application/ld+json',\n              },\n              children: escapeHtml(json),\n            })\n          } catch {\n            // Skip invalid JSON-LD objects\n          }\n        } else {\n          const attribute = m.name ?? m.property\n          if (attribute) {\n            if (metaByAttribute[attribute]) {\n              continue\n            } else {\n              metaByAttribute[attribute] = true\n            }\n          }\n\n          resultMeta.push({\n            tag: 'meta',\n            attrs: {\n              ...m,\n              nonce,\n            },\n          })\n        }\n      }\n    }\n\n    if (title) {\n      resultMeta.push(title)\n    }\n\n    if (nonce) {\n      resultMeta.push({\n        tag: 'meta',\n        attrs: {\n          property: 'csp-nonce',\n          content: nonce,\n        },\n      })\n    }\n    resultMeta.reverse()\n\n    return resultMeta\n  }, [routeMeta, nonce])\n\n  const links = useRouterState({\n    select: (state) => {\n      const constructed = state.matches\n        .map((match) => match.links!)\n        .filter(Boolean)\n        .flat(1)\n        .map((link) => ({\n          tag: 'link',\n          attrs: {\n            ...link,\n            nonce,\n          },\n        })) satisfies Array<RouterManagedTag>\n\n      const manifest = router.ssr?.manifest\n\n      // These are the assets extracted from the ViteManifest\n      // using the `startManifestPlugin`\n      const assets = state.matches\n        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n        .filter(Boolean)\n        .flat(1)\n        .filter((asset) => asset.tag === 'link')\n        .map(\n          (asset) =>\n            ({\n              tag: 'link',\n              attrs: {\n                ...asset.attrs,\n                suppressHydrationWarning: true,\n                nonce,\n              },\n            }) satisfies RouterManagedTag,\n        )\n\n      return [...constructed, ...assets]\n    },\n    structuralSharing: true as any,\n  })\n\n  const preloadLinks = useRouterState({\n    select: (state) => {\n      const preloadLinks: Array<RouterManagedTag> = []\n\n      state.matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          router.ssr?.manifest?.routes[route.id]?.preloads\n            ?.filter(Boolean)\n            .forEach((preload) => {\n              preloadLinks.push({\n                tag: 'link',\n                attrs: {\n                  rel: 'modulepreload',\n                  href: preload,\n                  nonce,\n                },\n              })\n            }),\n        )\n\n      return preloadLinks\n    },\n    structuralSharing: true as any,\n  })\n\n  const styles = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.styles!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...attrs }) => ({\n        tag: 'style',\n        attrs,\n        children,\n        nonce,\n      })),\n    structuralSharing: true as any,\n  })\n\n  const headScripts: Array<RouterManagedTag> = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.headScripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n          nonce,\n        },\n        children,\n      })),\n    structuralSharing: true as any,\n  })\n\n  return uniqBy(\n    [\n      ...meta,\n      ...preloadLinks,\n      ...links,\n      ...styles,\n      ...headScripts,\n    ] as Array<RouterManagedTag>,\n    (d) => {\n      return JSON.stringify(d)\n    },\n  )\n}\n\n/**\n * Renders a stylesheet link for dev mode CSS collection.\n * On the server, renders the full link with route-scoped CSS URL.\n * On the client, renders the same link to avoid hydration mismatch,\n * then removes it after hydration since Vite's HMR handles CSS updates.\n */\nfunction DevStylesLink() {\n  const router = useRouter()\n\n  const routeIds = useRouterState({\n    select: (state) => state.matches.map((match) => match.routeId),\n  })\n\n  React.useEffect(() => {\n    // After hydration, remove the SSR-rendered dev styles link\n    document\n      .querySelectorAll('[data-tanstack-start-dev-styles]')\n      .forEach((el) => el.remove())\n  }, [])\n\n  // Build the same href on both server and client for hydration match\n  const href = `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds.join(','))}`\n\n  return (\n    <link\n      rel=\"stylesheet\"\n      href={href}\n      data-tanstack-start-dev-styles\n      suppressHydrationWarning\n    />\n  )\n}\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  return (\n    <>\n      {process.env.NODE_ENV !== 'production' && <DevStylesLink />}\n      {tags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n\nfunction uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n  const seen = new Set<string>()\n  return arr.filter((item) => {\n    const key = fn(item)\n    if (seen.has(key)) {\n      return false\n    }\n    seen.add(key)\n    return true\n  })\n}\n"],"names":["useRouter","useRouterState","React","escapeHtml","preloadLinks","jsx","jsxs","Fragment","createElement","Asset"],"mappings":"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"}
+{"version":3,"file":"HeadContent.cjs","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { buildDevStylesUrl, escapeHtml } from '@tanstack/router-core'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\n/**\n * Build the list of head/link/meta/script tags to render for active matches.\n * Used internally by `HeadContent`.\n */\nexport const useTags = () => {\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const routeMeta = useRouterState({\n    select: (state) => {\n      return state.matches.map((match) => match.meta!).filter(Boolean)\n    },\n  })\n\n  const meta: Array<RouterManagedTag> = React.useMemo(() => {\n    const resultMeta: Array<RouterManagedTag> = []\n    const metaByAttribute: Record<string, true> = {}\n    let title: RouterManagedTag | undefined\n    for (let i = routeMeta.length - 1; i >= 0; i--) {\n      const metas = routeMeta[i]!\n      for (let j = metas.length - 1; j >= 0; j--) {\n        const m = metas[j]\n        if (!m) continue\n\n        if (m.title) {\n          if (!title) {\n            title = {\n              tag: 'title',\n              children: m.title,\n            }\n          }\n        } else if ('script:ld+json' in m) {\n          // Handle JSON-LD structured data\n          // Content is HTML-escaped to prevent XSS when injected via dangerouslySetInnerHTML\n          try {\n            const json = JSON.stringify(m['script:ld+json'])\n            resultMeta.push({\n              tag: 'script',\n              attrs: {\n                type: 'application/ld+json',\n              },\n              children: escapeHtml(json),\n            })\n          } catch {\n            // Skip invalid JSON-LD objects\n          }\n        } else {\n          const attribute = m.name ?? m.property\n          if (attribute) {\n            if (metaByAttribute[attribute]) {\n              continue\n            } else {\n              metaByAttribute[attribute] = true\n            }\n          }\n\n          resultMeta.push({\n            tag: 'meta',\n            attrs: {\n              ...m,\n              nonce,\n            },\n          })\n        }\n      }\n    }\n\n    if (title) {\n      resultMeta.push(title)\n    }\n\n    if (nonce) {\n      resultMeta.push({\n        tag: 'meta',\n        attrs: {\n          property: 'csp-nonce',\n          content: nonce,\n        },\n      })\n    }\n    resultMeta.reverse()\n\n    return resultMeta\n  }, [routeMeta, nonce])\n\n  const links = useRouterState({\n    select: (state) => {\n      const constructed = state.matches\n        .map((match) => match.links!)\n        .filter(Boolean)\n        .flat(1)\n        .map((link) => ({\n          tag: 'link',\n          attrs: {\n            ...link,\n            nonce,\n          },\n        })) satisfies Array<RouterManagedTag>\n\n      const manifest = router.ssr?.manifest\n\n      // These are the assets extracted from the ViteManifest\n      // using the `startManifestPlugin`\n      const assets = state.matches\n        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n        .filter(Boolean)\n        .flat(1)\n        .filter((asset) => asset.tag === 'link')\n        .map(\n          (asset) =>\n            ({\n              tag: 'link',\n              attrs: {\n                ...asset.attrs,\n                suppressHydrationWarning: true,\n                nonce,\n              },\n            }) satisfies RouterManagedTag,\n        )\n\n      return [...constructed, ...assets]\n    },\n    structuralSharing: true as any,\n  })\n\n  const preloadLinks = useRouterState({\n    select: (state) => {\n      const preloadLinks: Array<RouterManagedTag> = []\n\n      state.matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          router.ssr?.manifest?.routes[route.id]?.preloads\n            ?.filter(Boolean)\n            .forEach((preload) => {\n              preloadLinks.push({\n                tag: 'link',\n                attrs: {\n                  rel: 'modulepreload',\n                  href: preload,\n                  nonce,\n                },\n              })\n            }),\n        )\n\n      return preloadLinks\n    },\n    structuralSharing: true as any,\n  })\n\n  const styles = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.styles!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...attrs }) => ({\n        tag: 'style',\n        attrs,\n        children,\n        nonce,\n      })),\n    structuralSharing: true as any,\n  })\n\n  const headScripts: Array<RouterManagedTag> = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.headScripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n          nonce,\n        },\n        children,\n      })),\n    structuralSharing: true as any,\n  })\n\n  return uniqBy(\n    [\n      ...meta,\n      ...preloadLinks,\n      ...links,\n      ...styles,\n      ...headScripts,\n    ] as Array<RouterManagedTag>,\n    (d) => {\n      return JSON.stringify(d)\n    },\n  )\n}\n\n/**\n * Renders a stylesheet link for dev mode CSS collection.\n * On the server, renders the full link with route-scoped CSS URL.\n * On the client, renders the same link to avoid hydration mismatch,\n * then removes it after hydration since Vite's HMR handles CSS updates.\n */\nfunction DevStylesLink() {\n  const router = useRouter()\n  const routeIds = useRouterState({\n    select: (state) => state.matches.map((match) => match.routeId),\n  })\n\n  React.useEffect(() => {\n    // After hydration, remove the SSR-rendered dev styles link\n    document\n      .querySelectorAll('[data-tanstack-start-dev-styles]')\n      .forEach((el) => el.remove())\n  }, [])\n\n  const href = buildDevStylesUrl(router.basepath, routeIds)\n\n  return (\n    <link\n      rel=\"stylesheet\"\n      href={href}\n      data-tanstack-start-dev-styles\n      suppressHydrationWarning\n    />\n  )\n}\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  return (\n    <>\n      {process.env.NODE_ENV !== 'production' && <DevStylesLink />}\n      {tags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n\nfunction uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n  const seen = new Set<string>()\n  return arr.filter((item) => {\n    const key = fn(item)\n    if (seen.has(key)) {\n      return false\n    }\n    seen.add(key)\n    return true\n  })\n}\n"],"names":["useRouter","useRouterState","React","escapeHtml","preloadLinks","buildDevStylesUrl","jsx","jsxs","Fragment","createElement","Asset"],"mappings":"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"}

package/dist/cjs/awaited.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const routerCore = require("@tanstack/router-core");
+const utils = require("./utils.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -21,8 +22,8 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 function useAwaited({ promise: _promise }) {
-  if (React__namespace.use) {
-    const data = React__namespace.use(_promise);
+  if (utils.reactUse) {
+    const data = utils.reactUse(_promise);
     return data;
   }
   const promise = routerCore.defer(_promise);

package/dist/cjs/awaited.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"awaited.cjs","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\n/** Suspend until a deferred promise resolves or rejects and return its data. */\nexport function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (React.use) {\n    const data = React.use(_promise)\n    return data\n  }\n  const promise = defer(_promise)\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {\n    throw promise\n  }\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {\n    throw promise[TSR_DEFERRED_PROMISE].error\n  }\n\n  return promise[TSR_DEFERRED_PROMISE].data\n}\n\n/**\n * Component that suspends on a deferred promise and renders its child with\n * the resolved value. Optionally provides a Suspense fallback.\n */\nexport function Await<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const inner = <AwaitInner {...props} />\n  if (props.fallback) {\n    return <React.Suspense fallback={props.fallback}>{inner}</React.Suspense>\n  }\n  return inner\n}\n\nfunction AwaitInner<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n): React.JSX.Element {\n  const data = useAwaited(props)\n\n  return props.children(data) as React.JSX.Element\n}\n"],"names":["React","defer","TSR_DEFERRED_PROMISE","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,WAAc,EAAE,SAAS,YAAgC;AAEvE,MAAIA,iBAAM,KAAK;AACb,UAAM,OAAOA,iBAAM,IAAI,QAAQ;AAC/B,WAAO;AAAA,EACT;AACA,QAAM,UAAUC,WAAAA,MAAM,QAAQ;AAE9B,MAAI,QAAQC,WAAAA,oBAAoB,EAAE,WAAW,WAAW;AACtD,UAAM;AAAA,EACR;AAEA,MAAI,QAAQA,WAAAA,oBAAoB,EAAE,WAAW,SAAS;AACpD,UAAM,QAAQA,WAAAA,oBAAoB,EAAE;AAAA,EACtC;AAEA,SAAO,QAAQA,WAAAA,oBAAoB,EAAE;AACvC;AAMO,SAAS,MACd,OAIA;AACA,QAAM,QAAQC,2BAAAA,IAAC,YAAA,EAAY,GAAG,MAAA,CAAO;AACrC,MAAI,MAAM,UAAU;AAClB,0CAAQH,iBAAM,UAAN,EAAe,UAAU,MAAM,UAAW,UAAA,OAAM;AAAA,EAC1D;AACA,SAAO;AACT;AAEA,SAAS,WACP,OAImB;AACnB,QAAM,OAAO,WAAW,KAAK;AAE7B,SAAO,MAAM,SAAS,IAAI;AAC5B;;;"}
+{"version":3,"file":"awaited.cjs","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'\nimport { reactUse } from './utils'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\n/** Suspend until a deferred promise resolves or rejects and return its data. */\nexport function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {\n  if (reactUse) {\n    const data = reactUse(_promise)\n    return data\n  }\n  const promise = defer(_promise)\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {\n    throw promise\n  }\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {\n    throw promise[TSR_DEFERRED_PROMISE].error\n  }\n\n  return promise[TSR_DEFERRED_PROMISE].data\n}\n\n/**\n * Component that suspends on a deferred promise and renders its child with\n * the resolved value. Optionally provides a Suspense fallback.\n */\nexport function Await<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const inner = <AwaitInner {...props} />\n  if (props.fallback) {\n    return <React.Suspense fallback={props.fallback}>{inner}</React.Suspense>\n  }\n  return inner\n}\n\nfunction AwaitInner<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n): React.JSX.Element {\n  const data = useAwaited(props)\n\n  return props.children(data) as React.JSX.Element\n}\n"],"names":["reactUse","defer","TSR_DEFERRED_PROMISE","jsx","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,SAAS,WAAc,EAAE,SAAS,YAAgC;AACvE,MAAIA,gBAAU;AACZ,UAAM,OAAOA,MAAAA,SAAS,QAAQ;AAC9B,WAAO;AAAA,EACT;AACA,QAAM,UAAUC,WAAAA,MAAM,QAAQ;AAE9B,MAAI,QAAQC,WAAAA,oBAAoB,EAAE,WAAW,WAAW;AACtD,UAAM;AAAA,EACR;AAEA,MAAI,QAAQA,WAAAA,oBAAoB,EAAE,WAAW,SAAS;AACpD,UAAM,QAAQA,WAAAA,oBAAoB,EAAE;AAAA,EACtC;AAEA,SAAO,QAAQA,WAAAA,oBAAoB,EAAE;AACvC;AAMO,SAAS,MACd,OAIA;AACA,QAAM,QAAQC,2BAAAA,IAAC,YAAA,EAAY,GAAG,MAAA,CAAO;AACrC,MAAI,MAAM,UAAU;AAClB,0CAAQC,iBAAM,UAAN,EAAe,UAAU,MAAM,UAAW,UAAA,OAAM;AAAA,EAC1D;AACA,SAAO;AACT;AAEA,SAAS,WACP,OAImB;AACnB,QAAM,OAAO,WAAW,KAAK;AAE7B,SAAO,MAAM,SAAS,IAAI;AAC5B;;;"}

package/dist/cjs/lazyRouteComponent.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const routerCore = require("@tanstack/router-core");
+const utils = require("./utils.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -54,8 +55,8 @@ function lazyRouteComponent(importer, exportName) {
       throw error;
     }
     if (!comp) {
-      if (React__namespace.use) {
-        React__namespace.use(load());
+      if (utils.reactUse) {
+        utils.reactUse(load());
       } else {
         throw load();
       }

package/dist/cjs/lazyRouteComponent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { isModuleNotFoundError } from '@tanstack/router-core'\nimport type { AsyncRouteComponent } from './route'\n\n/**\n * Wrap a dynamic import to create a route component that supports\n * `.preload()` and friendly reload-on-module-missing behavior.\n *\n * @param importer Function returning a module promise\n * @param exportName Named export to use (default: `default`)\n * @returns A lazy route component compatible with TanStack Router\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/lazyRouteComponentFunction\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> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\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 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.\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      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      if (React.use) {\n        React.use(load())\n      } else {\n        throw load()\n      }\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":["isModuleNotFoundError","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaO,SAAS,mBAId,UACA,YAGQ;AACR,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAA,EACX,KAAK,CAAC,QAAQ;AACb,sBAAc;AACd,eAAO,IAAI,cAAc,SAAS;AAAA,MACpC,CAAC,EACA,MAAM,CAAC,QAAQ;AAId,gBAAQ;AAMR,YAAIA,WAAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKA,kBAAM,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACvC,6BAAe,QAAQ,YAAY,GAAG;AACtC,uBAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAA;AAChB,YAAM,IAAI,QAAQ,MAAM;AAAA,MAAC,CAAC;AAAA,IAC5B;AACA,QAAI,OAAO;AAET,YAAM;AAAA,IACR;AAEA,QAAI,CAAC,MAAM;AAET,UAAIC,iBAAM,KAAK;AACbA,yBAAM,IAAI,MAAM;AAAA,MAClB,OAAO;AACL,cAAM,KAAA;AAAA,MACR;AAAA,IACF;AAEA,WAAOA,iBAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAE7B,SAAO;AACT;;"}
+{"version":3,"file":"lazyRouteComponent.cjs","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { isModuleNotFoundError } from '@tanstack/router-core'\nimport { reactUse } from './utils'\nimport type { AsyncRouteComponent } from './route'\n\n/**\n * Wrap a dynamic import to create a route component that supports\n * `.preload()` and friendly reload-on-module-missing behavior.\n *\n * @param importer Function returning a module promise\n * @param exportName Named export to use (default: `default`)\n * @returns A lazy route component compatible with TanStack Router\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/lazyRouteComponentFunction\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> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\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 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.\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      if (reactUse) {\n        reactUse(load())\n      } else {\n        throw load()\n      }\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":["isModuleNotFoundError","reactUse","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,mBAId,UACA,YAGQ;AACR,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAA,EACX,KAAK,CAAC,QAAQ;AACb,sBAAc;AACd,eAAO,IAAI,cAAc,SAAS;AAAA,MACpC,CAAC,EACA,MAAM,CAAC,QAAQ;AAId,gBAAQ;AAMR,YAAIA,WAAAA,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKA,kBAAM,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACvC,6BAAe,QAAQ,YAAY,GAAG;AACtC,uBAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAA;AAChB,YAAM,IAAI,QAAQ,MAAM;AAAA,MAAC,CAAC;AAAA,IAC5B;AACA,QAAI,OAAO;AAET,YAAM;AAAA,IACR;AAEA,QAAI,CAAC,MAAM;AACT,UAAIC,gBAAU;AACZA,cAAAA,SAAS,MAAM;AAAA,MACjB,OAAO;AACL,cAAM,KAAA;AAAA,MACR;AAAA,IACF;AAEA,WAAOC,iBAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAE7B,SAAO;AACT;;"}

package/dist/cjs/utils.cjs

@@ -18,6 +18,8 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const REACT_USE = "use";
+const reactUse = React__namespace[REACT_USE];
 function useStableCallback(fn) {
   const fnRef = React__namespace.useRef(fn);
   fnRef.current = fn;
@@ -58,6 +60,7 @@ function useForwardedRef(ref) {
   React__namespace.useImperativeHandle(ref, () => innerRef.current, []);
   return innerRef;
 }
+exports.reactUse = reactUse;
 exports.useForwardedRef = useForwardedRef;
 exports.useIntersectionObserver = useIntersectionObserver;
 exports.useLayoutEffect = useLayoutEffect;

package/dist/cjs/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n  fn: T,\n): T {\n  const fnRef = React.useRef(fn)\n  fnRef.current = fn\n\n  const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n  return ref.current as T\n}\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n  // initialise the ref with previous and current values\n  const ref = React.useRef<{ value: T; prev: T | null }>({\n    value: value,\n    prev: null,\n  })\n\n  const current = ref.current.value\n\n  // if the value passed into hook doesn't match what we store as \"current\"\n  // move the \"current\" to the \"previous\"\n  // and store the passed value as \"current\"\n  if (value !== current) {\n    ref.current = {\n      value: value,\n      prev: current,\n    }\n  }\n\n  // return the previous value only\n  return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: React.RefObject<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n) {\n  React.useEffect(() => {\n    if (\n      !ref.current ||\n      options.disabled ||\n      typeof IntersectionObserver !== 'function'\n    ) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observer.observe(ref.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [callback, intersectionObserverOptions, options.disabled, ref])\n}\n\n/**\n * React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.\n *\n * @param ref - The forwarded ref\n * @returns The inner ref returned by `useRef`\n * @example\n * ```tsx\n * const MyComponent = React.forwardRef((props, ref) => {\n *  const innerRef = useForwardedRef(ref)\n *  return <div ref={innerRef} />\n * })\n * ```\n */\nexport function useForwardedRef<T>(ref?: React.ForwardedRef<T>) {\n  const innerRef = React.useRef<T>(null)\n  React.useImperativeHandle(ref, () => innerRef.current!, [])\n  return innerRef\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEO,SAAS,kBACd,IACG;AACH,QAAM,QAAQA,iBAAM,OAAO,EAAE;AAC7B,QAAM,UAAU;AAEhB,QAAM,MAAMA,iBAAM,OAAO,IAAI,SAAqB,MAAM,QAAQ,GAAG,IAAI,CAAC;AACxE,SAAO,IAAI;AACb;AAEO,MAAM,kBACX,OAAO,WAAW,cAAcA,iBAAM,kBAAkBA,iBAAM;AAKzD,SAAS,YAAe,OAAoB;AAEjD,QAAM,MAAMA,iBAAM,OAAqC;AAAA,IACrD;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,QAAM,UAAU,IAAI,QAAQ;AAK5B,MAAI,UAAU,SAAS;AACrB,QAAI,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV;AAGA,SAAO,IAAI,QAAQ;AACrB;AA2BO,SAAS,wBACd,KACA,UACA,8BAAwD,CAAA,GACxD,UAAkC,IAClC;AACAA,mBAAM,UAAU,MAAM;AACpB,QACE,CAAC,IAAI,WACL,QAAQ,YACR,OAAO,yBAAyB,YAChC;AACA;AAAA,IACF;AAEA,UAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACrD,eAAS,KAAK;AAAA,IAChB,GAAG,2BAA2B;AAE9B,aAAS,QAAQ,IAAI,OAAO;AAE5B,WAAO,MAAM;AACX,eAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,UAAU,6BAA6B,QAAQ,UAAU,GAAG,CAAC;AACnE;AAeO,SAAS,gBAAmB,KAA6B;AAC9D,QAAM,WAAWA,iBAAM,OAAU,IAAI;AACrCA,mBAAM,oBAAoB,KAAK,MAAM,SAAS,SAAU,CAAA,CAAE;AAC1D,SAAO;AACT;;;;;;"}
+{"version":3,"file":"utils.cjs","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\n\n// Safe version of React.use() that will not cause compilation errors against\n// React 18 with Webpack, which statically analyzes imports and fails when it\n// sees React.use referenced (since 'use' is not exported from React 18).\n// This uses a dynamic string lookup to avoid the static analysis.\nconst REACT_USE = 'use'\n\n/**\n * React.use if available (React 19+), undefined otherwise.\n * Use dynamic lookup to avoid Webpack compilation errors with React 18.\n */\nexport const reactUse:\n  | (<T>(usable: Promise<T> | React.Context<T>) => T)\n  | undefined = (React as any)[REACT_USE]\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n  fn: T,\n): T {\n  const fnRef = React.useRef(fn)\n  fnRef.current = fn\n\n  const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n  return ref.current as T\n}\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n  // initialise the ref with previous and current values\n  const ref = React.useRef<{ value: T; prev: T | null }>({\n    value: value,\n    prev: null,\n  })\n\n  const current = ref.current.value\n\n  // if the value passed into hook doesn't match what we store as \"current\"\n  // move the \"current\" to the \"previous\"\n  // and store the passed value as \"current\"\n  if (value !== current) {\n    ref.current = {\n      value: value,\n      prev: current,\n    }\n  }\n\n  // return the previous value only\n  return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: React.RefObject<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n) {\n  React.useEffect(() => {\n    if (\n      !ref.current ||\n      options.disabled ||\n      typeof IntersectionObserver !== 'function'\n    ) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observer.observe(ref.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [callback, intersectionObserverOptions, options.disabled, ref])\n}\n\n/**\n * React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.\n *\n * @param ref - The forwarded ref\n * @returns The inner ref returned by `useRef`\n * @example\n * ```tsx\n * const MyComponent = React.forwardRef((props, ref) => {\n *  const innerRef = useForwardedRef(ref)\n *  return <div ref={innerRef} />\n * })\n * ```\n */\nexport function useForwardedRef<T>(ref?: React.ForwardedRef<T>) {\n  const innerRef = React.useRef<T>(null)\n  React.useImperativeHandle(ref, () => innerRef.current!, [])\n  return innerRef\n}\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,MAAM,YAAY;AAMX,MAAM,WAEIA,iBAAc,SAAS;AAEjC,SAAS,kBACd,IACG;AACH,QAAM,QAAQA,iBAAM,OAAO,EAAE;AAC7B,QAAM,UAAU;AAEhB,QAAM,MAAMA,iBAAM,OAAO,IAAI,SAAqB,MAAM,QAAQ,GAAG,IAAI,CAAC;AACxE,SAAO,IAAI;AACb;AAEO,MAAM,kBACX,OAAO,WAAW,cAAcA,iBAAM,kBAAkBA,iBAAM;AAKzD,SAAS,YAAe,OAAoB;AAEjD,QAAM,MAAMA,iBAAM,OAAqC;AAAA,IACrD;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,QAAM,UAAU,IAAI,QAAQ;AAK5B,MAAI,UAAU,SAAS;AACrB,QAAI,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV;AAGA,SAAO,IAAI,QAAQ;AACrB;AA2BO,SAAS,wBACd,KACA,UACA,8BAAwD,CAAA,GACxD,UAAkC,IAClC;AACAA,mBAAM,UAAU,MAAM;AACpB,QACE,CAAC,IAAI,WACL,QAAQ,YACR,OAAO,yBAAyB,YAChC;AACA;AAAA,IACF;AAEA,UAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACrD,eAAS,KAAK;AAAA,IAChB,GAAG,2BAA2B;AAE9B,aAAS,QAAQ,IAAI,OAAO;AAE5B,WAAO,MAAM;AACX,eAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,UAAU,6BAA6B,QAAQ,UAAU,GAAG,CAAC;AACnE;AAeO,SAAS,gBAAmB,KAA6B;AAC9D,QAAM,WAAWA,iBAAM,OAAU,IAAI;AACrCA,mBAAM,oBAAoB,KAAK,MAAM,SAAS,SAAU,CAAA,CAAE;AAC1D,SAAO;AACT;;;;;;;"}

package/dist/cjs/utils.d.cts

@@ -1,4 +1,9 @@
 import * as React from 'react';
+/**
+ * React.use if available (React 19+), undefined otherwise.
+ * Use dynamic lookup to avoid Webpack compilation errors with React 18.
+ */
+export declare const reactUse: (<T>(usable: Promise<T> | React.Context<T>) => T) | undefined;
 export declare function useStableCallback<T extends (...args: Array<any>) => any>(fn: T): T;
 export declare const useLayoutEffect: typeof React.useLayoutEffect;
 /**

package/dist/esm/HeadContent.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { createElement } from "react";
-import { escapeHtml } from "@tanstack/router-core";
+import { escapeHtml, buildDevStylesUrl } from "@tanstack/router-core";
 import { Asset } from "./Asset.js";
 import { useRouter } from "./useRouter.js";
 import { useRouterState } from "./useRouterState.js";
@@ -152,14 +152,14 @@ const useTags = () => {
   );
 };
 function DevStylesLink() {
-  useRouter();
+  const router = useRouter();
   const routeIds = useRouterState({
     select: (state) => state.matches.map((match) => match.routeId)
   });
   React.useEffect(() => {
     document.querySelectorAll("[data-tanstack-start-dev-styles]").forEach((el) => el.remove());
   }, []);
-  const href = `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds.join(","))}`;
+  const href = buildDevStylesUrl(router.basepath, routeIds);
   return /* @__PURE__ */ jsx(
     "link",
     {

package/dist/esm/HeadContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { escapeHtml } from '@tanstack/router-core'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\n/**\n * Build the list of head/link/meta/script tags to render for active matches.\n * Used internally by `HeadContent`.\n */\nexport const useTags = () => {\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const routeMeta = useRouterState({\n    select: (state) => {\n      return state.matches.map((match) => match.meta!).filter(Boolean)\n    },\n  })\n\n  const meta: Array<RouterManagedTag> = React.useMemo(() => {\n    const resultMeta: Array<RouterManagedTag> = []\n    const metaByAttribute: Record<string, true> = {}\n    let title: RouterManagedTag | undefined\n    for (let i = routeMeta.length - 1; i >= 0; i--) {\n      const metas = routeMeta[i]!\n      for (let j = metas.length - 1; j >= 0; j--) {\n        const m = metas[j]\n        if (!m) continue\n\n        if (m.title) {\n          if (!title) {\n            title = {\n              tag: 'title',\n              children: m.title,\n            }\n          }\n        } else if ('script:ld+json' in m) {\n          // Handle JSON-LD structured data\n          // Content is HTML-escaped to prevent XSS when injected via dangerouslySetInnerHTML\n          try {\n            const json = JSON.stringify(m['script:ld+json'])\n            resultMeta.push({\n              tag: 'script',\n              attrs: {\n                type: 'application/ld+json',\n              },\n              children: escapeHtml(json),\n            })\n          } catch {\n            // Skip invalid JSON-LD objects\n          }\n        } else {\n          const attribute = m.name ?? m.property\n          if (attribute) {\n            if (metaByAttribute[attribute]) {\n              continue\n            } else {\n              metaByAttribute[attribute] = true\n            }\n          }\n\n          resultMeta.push({\n            tag: 'meta',\n            attrs: {\n              ...m,\n              nonce,\n            },\n          })\n        }\n      }\n    }\n\n    if (title) {\n      resultMeta.push(title)\n    }\n\n    if (nonce) {\n      resultMeta.push({\n        tag: 'meta',\n        attrs: {\n          property: 'csp-nonce',\n          content: nonce,\n        },\n      })\n    }\n    resultMeta.reverse()\n\n    return resultMeta\n  }, [routeMeta, nonce])\n\n  const links = useRouterState({\n    select: (state) => {\n      const constructed = state.matches\n        .map((match) => match.links!)\n        .filter(Boolean)\n        .flat(1)\n        .map((link) => ({\n          tag: 'link',\n          attrs: {\n            ...link,\n            nonce,\n          },\n        })) satisfies Array<RouterManagedTag>\n\n      const manifest = router.ssr?.manifest\n\n      // These are the assets extracted from the ViteManifest\n      // using the `startManifestPlugin`\n      const assets = state.matches\n        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n        .filter(Boolean)\n        .flat(1)\n        .filter((asset) => asset.tag === 'link')\n        .map(\n          (asset) =>\n            ({\n              tag: 'link',\n              attrs: {\n                ...asset.attrs,\n                suppressHydrationWarning: true,\n                nonce,\n              },\n            }) satisfies RouterManagedTag,\n        )\n\n      return [...constructed, ...assets]\n    },\n    structuralSharing: true as any,\n  })\n\n  const preloadLinks = useRouterState({\n    select: (state) => {\n      const preloadLinks: Array<RouterManagedTag> = []\n\n      state.matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          router.ssr?.manifest?.routes[route.id]?.preloads\n            ?.filter(Boolean)\n            .forEach((preload) => {\n              preloadLinks.push({\n                tag: 'link',\n                attrs: {\n                  rel: 'modulepreload',\n                  href: preload,\n                  nonce,\n                },\n              })\n            }),\n        )\n\n      return preloadLinks\n    },\n    structuralSharing: true as any,\n  })\n\n  const styles = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.styles!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...attrs }) => ({\n        tag: 'style',\n        attrs,\n        children,\n        nonce,\n      })),\n    structuralSharing: true as any,\n  })\n\n  const headScripts: Array<RouterManagedTag> = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.headScripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n          nonce,\n        },\n        children,\n      })),\n    structuralSharing: true as any,\n  })\n\n  return uniqBy(\n    [\n      ...meta,\n      ...preloadLinks,\n      ...links,\n      ...styles,\n      ...headScripts,\n    ] as Array<RouterManagedTag>,\n    (d) => {\n      return JSON.stringify(d)\n    },\n  )\n}\n\n/**\n * Renders a stylesheet link for dev mode CSS collection.\n * On the server, renders the full link with route-scoped CSS URL.\n * On the client, renders the same link to avoid hydration mismatch,\n * then removes it after hydration since Vite's HMR handles CSS updates.\n */\nfunction DevStylesLink() {\n  const router = useRouter()\n\n  const routeIds = useRouterState({\n    select: (state) => state.matches.map((match) => match.routeId),\n  })\n\n  React.useEffect(() => {\n    // After hydration, remove the SSR-rendered dev styles link\n    document\n      .querySelectorAll('[data-tanstack-start-dev-styles]')\n      .forEach((el) => el.remove())\n  }, [])\n\n  // Build the same href on both server and client for hydration match\n  const href = `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds.join(','))}`\n\n  return (\n    <link\n      rel=\"stylesheet\"\n      href={href}\n      data-tanstack-start-dev-styles\n      suppressHydrationWarning\n    />\n  )\n}\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  return (\n    <>\n      {process.env.NODE_ENV !== 'production' && <DevStylesLink />}\n      {tags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n\nfunction uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n  const seen = new Set<string>()\n  return arr.filter((item) => {\n    const key = fn(item)\n    if (seen.has(key)) {\n      return false\n    }\n    seen.add(key)\n    return true\n  })\n}\n"],"names":["preloadLinks"],"mappings":"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"}
+{"version":3,"file":"HeadContent.js","sources":["../../src/HeadContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { buildDevStylesUrl, escapeHtml } from '@tanstack/router-core'\nimport { Asset } from './Asset'\nimport { useRouter } from './useRouter'\nimport { useRouterState } from './useRouterState'\nimport type { RouterManagedTag } from '@tanstack/router-core'\n\n/**\n * Build the list of head/link/meta/script tags to render for active matches.\n * Used internally by `HeadContent`.\n */\nexport const useTags = () => {\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  const routeMeta = useRouterState({\n    select: (state) => {\n      return state.matches.map((match) => match.meta!).filter(Boolean)\n    },\n  })\n\n  const meta: Array<RouterManagedTag> = React.useMemo(() => {\n    const resultMeta: Array<RouterManagedTag> = []\n    const metaByAttribute: Record<string, true> = {}\n    let title: RouterManagedTag | undefined\n    for (let i = routeMeta.length - 1; i >= 0; i--) {\n      const metas = routeMeta[i]!\n      for (let j = metas.length - 1; j >= 0; j--) {\n        const m = metas[j]\n        if (!m) continue\n\n        if (m.title) {\n          if (!title) {\n            title = {\n              tag: 'title',\n              children: m.title,\n            }\n          }\n        } else if ('script:ld+json' in m) {\n          // Handle JSON-LD structured data\n          // Content is HTML-escaped to prevent XSS when injected via dangerouslySetInnerHTML\n          try {\n            const json = JSON.stringify(m['script:ld+json'])\n            resultMeta.push({\n              tag: 'script',\n              attrs: {\n                type: 'application/ld+json',\n              },\n              children: escapeHtml(json),\n            })\n          } catch {\n            // Skip invalid JSON-LD objects\n          }\n        } else {\n          const attribute = m.name ?? m.property\n          if (attribute) {\n            if (metaByAttribute[attribute]) {\n              continue\n            } else {\n              metaByAttribute[attribute] = true\n            }\n          }\n\n          resultMeta.push({\n            tag: 'meta',\n            attrs: {\n              ...m,\n              nonce,\n            },\n          })\n        }\n      }\n    }\n\n    if (title) {\n      resultMeta.push(title)\n    }\n\n    if (nonce) {\n      resultMeta.push({\n        tag: 'meta',\n        attrs: {\n          property: 'csp-nonce',\n          content: nonce,\n        },\n      })\n    }\n    resultMeta.reverse()\n\n    return resultMeta\n  }, [routeMeta, nonce])\n\n  const links = useRouterState({\n    select: (state) => {\n      const constructed = state.matches\n        .map((match) => match.links!)\n        .filter(Boolean)\n        .flat(1)\n        .map((link) => ({\n          tag: 'link',\n          attrs: {\n            ...link,\n            nonce,\n          },\n        })) satisfies Array<RouterManagedTag>\n\n      const manifest = router.ssr?.manifest\n\n      // These are the assets extracted from the ViteManifest\n      // using the `startManifestPlugin`\n      const assets = state.matches\n        .map((match) => manifest?.routes[match.routeId]?.assets ?? [])\n        .filter(Boolean)\n        .flat(1)\n        .filter((asset) => asset.tag === 'link')\n        .map(\n          (asset) =>\n            ({\n              tag: 'link',\n              attrs: {\n                ...asset.attrs,\n                suppressHydrationWarning: true,\n                nonce,\n              },\n            }) satisfies RouterManagedTag,\n        )\n\n      return [...constructed, ...assets]\n    },\n    structuralSharing: true as any,\n  })\n\n  const preloadLinks = useRouterState({\n    select: (state) => {\n      const preloadLinks: Array<RouterManagedTag> = []\n\n      state.matches\n        .map((match) => router.looseRoutesById[match.routeId]!)\n        .forEach((route) =>\n          router.ssr?.manifest?.routes[route.id]?.preloads\n            ?.filter(Boolean)\n            .forEach((preload) => {\n              preloadLinks.push({\n                tag: 'link',\n                attrs: {\n                  rel: 'modulepreload',\n                  href: preload,\n                  nonce,\n                },\n              })\n            }),\n        )\n\n      return preloadLinks\n    },\n    structuralSharing: true as any,\n  })\n\n  const styles = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.styles!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...attrs }) => ({\n        tag: 'style',\n        attrs,\n        children,\n        nonce,\n      })),\n    structuralSharing: true as any,\n  })\n\n  const headScripts: Array<RouterManagedTag> = useRouterState({\n    select: (state) =>\n      (\n        state.matches\n          .map((match) => match.headScripts!)\n          .flat(1)\n          .filter(Boolean) as Array<RouterManagedTag>\n      ).map(({ children, ...script }) => ({\n        tag: 'script',\n        attrs: {\n          ...script,\n          nonce,\n        },\n        children,\n      })),\n    structuralSharing: true as any,\n  })\n\n  return uniqBy(\n    [\n      ...meta,\n      ...preloadLinks,\n      ...links,\n      ...styles,\n      ...headScripts,\n    ] as Array<RouterManagedTag>,\n    (d) => {\n      return JSON.stringify(d)\n    },\n  )\n}\n\n/**\n * Renders a stylesheet link for dev mode CSS collection.\n * On the server, renders the full link with route-scoped CSS URL.\n * On the client, renders the same link to avoid hydration mismatch,\n * then removes it after hydration since Vite's HMR handles CSS updates.\n */\nfunction DevStylesLink() {\n  const router = useRouter()\n  const routeIds = useRouterState({\n    select: (state) => state.matches.map((match) => match.routeId),\n  })\n\n  React.useEffect(() => {\n    // After hydration, remove the SSR-rendered dev styles link\n    document\n      .querySelectorAll('[data-tanstack-start-dev-styles]')\n      .forEach((el) => el.remove())\n  }, [])\n\n  const href = buildDevStylesUrl(router.basepath, routeIds)\n\n  return (\n    <link\n      rel=\"stylesheet\"\n      href={href}\n      data-tanstack-start-dev-styles\n      suppressHydrationWarning\n    />\n  )\n}\n\n/**\n * Render route-managed head tags (title, meta, links, styles, head scripts).\n * Place inside the document head of your app shell.\n * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management\n */\nexport function HeadContent() {\n  const tags = useTags()\n  const router = useRouter()\n  const nonce = router.options.ssr?.nonce\n  return (\n    <>\n      {process.env.NODE_ENV !== 'production' && <DevStylesLink />}\n      {tags.map((tag) => (\n        <Asset {...tag} key={`tsr-meta-${JSON.stringify(tag)}`} nonce={nonce} />\n      ))}\n    </>\n  )\n}\n\nfunction uniqBy<T>(arr: Array<T>, fn: (item: T) => string) {\n  const seen = new Set<string>()\n  return arr.filter((item) => {\n    const key = fn(item)\n    if (seen.has(key)) {\n      return false\n    }\n    seen.add(key)\n    return true\n  })\n}\n"],"names":["preloadLinks"],"mappings":"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"}

package/dist/esm/awaited.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { defer, TSR_DEFERRED_PROMISE } from "@tanstack/router-core";
+import { reactUse } from "./utils.js";
 function useAwaited({ promise: _promise }) {
-  if (React.use) {
-    const data = React.use(_promise);
+  if (reactUse) {
+    const data = reactUse(_promise);
     return data;
   }
   const promise = defer(_promise);

package/dist/esm/awaited.js.map

@@ -1 +1 @@
-{"version":3,"file":"awaited.js","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\n/** Suspend until a deferred promise resolves or rejects and return its data. */\nexport function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (React.use) {\n    const data = React.use(_promise)\n    return data\n  }\n  const promise = defer(_promise)\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {\n    throw promise\n  }\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {\n    throw promise[TSR_DEFERRED_PROMISE].error\n  }\n\n  return promise[TSR_DEFERRED_PROMISE].data\n}\n\n/**\n * Component that suspends on a deferred promise and renders its child with\n * the resolved value. Optionally provides a Suspense fallback.\n */\nexport function Await<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const inner = <AwaitInner {...props} />\n  if (props.fallback) {\n    return <React.Suspense fallback={props.fallback}>{inner}</React.Suspense>\n  }\n  return inner\n}\n\nfunction AwaitInner<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n): React.JSX.Element {\n  const data = useAwaited(props)\n\n  return props.children(data) as React.JSX.Element\n}\n"],"names":[],"mappings":";;;AASO,SAAS,WAAc,EAAE,SAAS,YAAgC;AAEvE,MAAI,MAAM,KAAK;AACb,UAAM,OAAO,MAAM,IAAI,QAAQ;AAC/B,WAAO;AAAA,EACT;AACA,QAAM,UAAU,MAAM,QAAQ;AAE9B,MAAI,QAAQ,oBAAoB,EAAE,WAAW,WAAW;AACtD,UAAM;AAAA,EACR;AAEA,MAAI,QAAQ,oBAAoB,EAAE,WAAW,SAAS;AACpD,UAAM,QAAQ,oBAAoB,EAAE;AAAA,EACtC;AAEA,SAAO,QAAQ,oBAAoB,EAAE;AACvC;AAMO,SAAS,MACd,OAIA;AACA,QAAM,QAAQ,oBAAC,YAAA,EAAY,GAAG,MAAA,CAAO;AACrC,MAAI,MAAM,UAAU;AAClB,+BAAQ,MAAM,UAAN,EAAe,UAAU,MAAM,UAAW,UAAA,OAAM;AAAA,EAC1D;AACA,SAAO;AACT;AAEA,SAAS,WACP,OAImB;AACnB,QAAM,OAAO,WAAW,KAAK;AAE7B,SAAO,MAAM,SAAS,IAAI;AAC5B;"}
+{"version":3,"file":"awaited.js","sources":["../../src/awaited.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'\nimport { reactUse } from './utils'\n\nexport type AwaitOptions<T> = {\n  promise: Promise<T>\n}\n\n/** Suspend until a deferred promise resolves or rejects and return its data. */\nexport function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {\n  if (reactUse) {\n    const data = reactUse(_promise)\n    return data\n  }\n  const promise = defer(_promise)\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'pending') {\n    throw promise\n  }\n\n  if (promise[TSR_DEFERRED_PROMISE].status === 'error') {\n    throw promise[TSR_DEFERRED_PROMISE].error\n  }\n\n  return promise[TSR_DEFERRED_PROMISE].data\n}\n\n/**\n * Component that suspends on a deferred promise and renders its child with\n * the resolved value. Optionally provides a Suspense fallback.\n */\nexport function Await<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n) {\n  const inner = <AwaitInner {...props} />\n  if (props.fallback) {\n    return <React.Suspense fallback={props.fallback}>{inner}</React.Suspense>\n  }\n  return inner\n}\n\nfunction AwaitInner<T>(\n  props: AwaitOptions<T> & {\n    fallback?: React.ReactNode\n    children: (result: T) => React.ReactNode\n  },\n): React.JSX.Element {\n  const data = useAwaited(props)\n\n  return props.children(data) as React.JSX.Element\n}\n"],"names":[],"mappings":";;;;AAUO,SAAS,WAAc,EAAE,SAAS,YAAgC;AACvE,MAAI,UAAU;AACZ,UAAM,OAAO,SAAS,QAAQ;AAC9B,WAAO;AAAA,EACT;AACA,QAAM,UAAU,MAAM,QAAQ;AAE9B,MAAI,QAAQ,oBAAoB,EAAE,WAAW,WAAW;AACtD,UAAM;AAAA,EACR;AAEA,MAAI,QAAQ,oBAAoB,EAAE,WAAW,SAAS;AACpD,UAAM,QAAQ,oBAAoB,EAAE;AAAA,EACtC;AAEA,SAAO,QAAQ,oBAAoB,EAAE;AACvC;AAMO,SAAS,MACd,OAIA;AACA,QAAM,QAAQ,oBAAC,YAAA,EAAY,GAAG,MAAA,CAAO;AACrC,MAAI,MAAM,UAAU;AAClB,+BAAQ,MAAM,UAAN,EAAe,UAAU,MAAM,UAAW,UAAA,OAAM;AAAA,EAC1D;AACA,SAAO;AACT;AAEA,SAAS,WACP,OAImB;AACnB,QAAM,OAAO,WAAW,KAAK;AAE7B,SAAO,MAAM,SAAS,IAAI;AAC5B;"}

package/dist/esm/lazyRouteComponent.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { isModuleNotFoundError } from "@tanstack/router-core";
+import { reactUse } from "./utils.js";
 function lazyRouteComponent(importer, exportName) {
   let loadPromise;
   let comp;
@@ -35,8 +36,8 @@ function lazyRouteComponent(importer, exportName) {
       throw error;
     }
     if (!comp) {
-      if (React.use) {
-        React.use(load());
+      if (reactUse) {
+        reactUse(load());
       } else {
         throw load();
       }

package/dist/esm/lazyRouteComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { isModuleNotFoundError } from '@tanstack/router-core'\nimport type { AsyncRouteComponent } from './route'\n\n/**\n * Wrap a dynamic import to create a route component that supports\n * `.preload()` and friendly reload-on-module-missing behavior.\n *\n * @param importer Function returning a module promise\n * @param exportName Named export to use (default: `default`)\n * @returns A lazy route component compatible with TanStack Router\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/lazyRouteComponentFunction\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> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\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 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.\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      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      if (React.use) {\n        React.use(load())\n      } else {\n        throw load()\n      }\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":";;AAaO,SAAS,mBAId,UACA,YAGQ;AACR,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAA,EACX,KAAK,CAAC,QAAQ;AACb,sBAAc;AACd,eAAO,IAAI,cAAc,SAAS;AAAA,MACpC,CAAC,EACA,MAAM,CAAC,QAAQ;AAId,gBAAQ;AAMR,YAAI,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKA,kBAAM,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACvC,6BAAe,QAAQ,YAAY,GAAG;AACtC,uBAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAA;AAChB,YAAM,IAAI,QAAQ,MAAM;AAAA,MAAC,CAAC;AAAA,IAC5B;AACA,QAAI,OAAO;AAET,YAAM;AAAA,IACR;AAEA,QAAI,CAAC,MAAM;AAET,UAAI,MAAM,KAAK;AACb,cAAM,IAAI,MAAM;AAAA,MAClB,OAAO;AACL,cAAM,KAAA;AAAA,MACR;AAAA,IACF;AAEA,WAAO,MAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAE7B,SAAO;AACT;"}
+{"version":3,"file":"lazyRouteComponent.js","sources":["../../src/lazyRouteComponent.tsx"],"sourcesContent":["import * as React from 'react'\nimport { isModuleNotFoundError } from '@tanstack/router-core'\nimport { reactUse } from './utils'\nimport type { AsyncRouteComponent } from './route'\n\n/**\n * Wrap a dynamic import to create a route component that supports\n * `.preload()` and friendly reload-on-module-missing behavior.\n *\n * @param importer Function returning a module promise\n * @param exportName Named export to use (default: `default`)\n * @returns A lazy route component compatible with TanStack Router\n * @link https://tanstack.com/router/latest/docs/framework/react/api/router/lazyRouteComponentFunction\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> | undefined\n  let comp: T[TKey] | T['default']\n  let error: any\n  let reload: boolean\n\n  const load = () => {\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 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.\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      if (reactUse) {\n        reactUse(load())\n      } else {\n        throw load()\n      }\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":";;;AAcO,SAAS,mBAId,UACA,YAGQ;AACR,MAAI;AACJ,MAAI;AACJ,MAAI;AACJ,MAAI;AAEJ,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,aAAa;AAChB,oBAAc,SAAA,EACX,KAAK,CAAC,QAAQ;AACb,sBAAc;AACd,eAAO,IAAI,cAAc,SAAS;AAAA,MACpC,CAAC,EACA,MAAM,CAAC,QAAQ;AAId,gBAAQ;AAMR,YAAI,sBAAsB,KAAK,GAAG;AAChC,cACE,iBAAiB,SACjB,OAAO,WAAW,eAClB,OAAO,mBAAmB,aAC1B;AAKA,kBAAM,aAAa,0BAA0B,MAAM,OAAO;AAC1D,gBAAI,CAAC,eAAe,QAAQ,UAAU,GAAG;AACvC,6BAAe,QAAQ,YAAY,GAAG;AACtC,uBAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,SAAS,KAAK,OAAY;AAEzC,QAAI,QAAQ;AAGV,aAAO,SAAS,OAAA;AAChB,YAAM,IAAI,QAAQ,MAAM;AAAA,MAAC,CAAC;AAAA,IAC5B;AACA,QAAI,OAAO;AAET,YAAM;AAAA,IACR;AAEA,QAAI,CAAC,MAAM;AACT,UAAI,UAAU;AACZ,iBAAS,MAAM;AAAA,MACjB,OAAO;AACL,cAAM,KAAA;AAAA,MACR;AAAA,IACF;AAEA,WAAO,MAAM,cAAc,MAAM,KAAK;AAAA,EACxC;AAEE,WAAiB,UAAU;AAE7B,SAAO;AACT;"}

package/dist/esm/utils.d.ts

@@ -1,4 +1,9 @@
 import * as React from 'react';
+/**
+ * React.use if available (React 19+), undefined otherwise.
+ * Use dynamic lookup to avoid Webpack compilation errors with React 18.
+ */
+export declare const reactUse: (<T>(usable: Promise<T> | React.Context<T>) => T) | undefined;
 export declare function useStableCallback<T extends (...args: Array<any>) => any>(fn: T): T;
 export declare const useLayoutEffect: typeof React.useLayoutEffect;
 /**

package/dist/esm/utils.js

@@ -1,4 +1,6 @@
 import * as React from "react";
+const REACT_USE = "use";
+const reactUse = React[REACT_USE];
 function useStableCallback(fn) {
   const fnRef = React.useRef(fn);
   fnRef.current = fn;
@@ -40,6 +42,7 @@ function useForwardedRef(ref) {
   return innerRef;
 }
 export {
+  reactUse,
   useForwardedRef,
   useIntersectionObserver,
   useLayoutEffect,

package/dist/esm/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n  fn: T,\n): T {\n  const fnRef = React.useRef(fn)\n  fnRef.current = fn\n\n  const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n  return ref.current as T\n}\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n  // initialise the ref with previous and current values\n  const ref = React.useRef<{ value: T; prev: T | null }>({\n    value: value,\n    prev: null,\n  })\n\n  const current = ref.current.value\n\n  // if the value passed into hook doesn't match what we store as \"current\"\n  // move the \"current\" to the \"previous\"\n  // and store the passed value as \"current\"\n  if (value !== current) {\n    ref.current = {\n      value: value,\n      prev: current,\n    }\n  }\n\n  // return the previous value only\n  return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: React.RefObject<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n) {\n  React.useEffect(() => {\n    if (\n      !ref.current ||\n      options.disabled ||\n      typeof IntersectionObserver !== 'function'\n    ) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observer.observe(ref.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [callback, intersectionObserverOptions, options.disabled, ref])\n}\n\n/**\n * React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.\n *\n * @param ref - The forwarded ref\n * @returns The inner ref returned by `useRef`\n * @example\n * ```tsx\n * const MyComponent = React.forwardRef((props, ref) => {\n *  const innerRef = useForwardedRef(ref)\n *  return <div ref={innerRef} />\n * })\n * ```\n */\nexport function useForwardedRef<T>(ref?: React.ForwardedRef<T>) {\n  const innerRef = React.useRef<T>(null)\n  React.useImperativeHandle(ref, () => innerRef.current!, [])\n  return innerRef\n}\n"],"names":[],"mappings":";AAEO,SAAS,kBACd,IACG;AACH,QAAM,QAAQ,MAAM,OAAO,EAAE;AAC7B,QAAM,UAAU;AAEhB,QAAM,MAAM,MAAM,OAAO,IAAI,SAAqB,MAAM,QAAQ,GAAG,IAAI,CAAC;AACxE,SAAO,IAAI;AACb;AAEO,MAAM,kBACX,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAKzD,SAAS,YAAe,OAAoB;AAEjD,QAAM,MAAM,MAAM,OAAqC;AAAA,IACrD;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,QAAM,UAAU,IAAI,QAAQ;AAK5B,MAAI,UAAU,SAAS;AACrB,QAAI,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV;AAGA,SAAO,IAAI,QAAQ;AACrB;AA2BO,SAAS,wBACd,KACA,UACA,8BAAwD,CAAA,GACxD,UAAkC,IAClC;AACA,QAAM,UAAU,MAAM;AACpB,QACE,CAAC,IAAI,WACL,QAAQ,YACR,OAAO,yBAAyB,YAChC;AACA;AAAA,IACF;AAEA,UAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACrD,eAAS,KAAK;AAAA,IAChB,GAAG,2BAA2B;AAE9B,aAAS,QAAQ,IAAI,OAAO;AAE5B,WAAO,MAAM;AACX,eAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,UAAU,6BAA6B,QAAQ,UAAU,GAAG,CAAC;AACnE;AAeO,SAAS,gBAAmB,KAA6B;AAC9D,QAAM,WAAW,MAAM,OAAU,IAAI;AACrC,QAAM,oBAAoB,KAAK,MAAM,SAAS,SAAU,CAAA,CAAE;AAC1D,SAAO;AACT;"}
+{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\n\n// Safe version of React.use() that will not cause compilation errors against\n// React 18 with Webpack, which statically analyzes imports and fails when it\n// sees React.use referenced (since 'use' is not exported from React 18).\n// This uses a dynamic string lookup to avoid the static analysis.\nconst REACT_USE = 'use'\n\n/**\n * React.use if available (React 19+), undefined otherwise.\n * Use dynamic lookup to avoid Webpack compilation errors with React 18.\n */\nexport const reactUse:\n  | (<T>(usable: Promise<T> | React.Context<T>) => T)\n  | undefined = (React as any)[REACT_USE]\n\nexport function useStableCallback<T extends (...args: Array<any>) => any>(\n  fn: T,\n): T {\n  const fnRef = React.useRef(fn)\n  fnRef.current = fn\n\n  const ref = React.useRef((...args: Array<any>) => fnRef.current(...args))\n  return ref.current as T\n}\n\nexport const useLayoutEffect =\n  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Taken from https://www.developerway.com/posts/implementing-advanced-use-previous-hook#part3\n */\nexport function usePrevious<T>(value: T): T | null {\n  // initialise the ref with previous and current values\n  const ref = React.useRef<{ value: T; prev: T | null }>({\n    value: value,\n    prev: null,\n  })\n\n  const current = ref.current.value\n\n  // if the value passed into hook doesn't match what we store as \"current\"\n  // move the \"current\" to the \"previous\"\n  // and store the passed value as \"current\"\n  if (value !== current) {\n    ref.current = {\n      value: value,\n      prev: current,\n    }\n  }\n\n  // return the previous value only\n  return ref.current.prev\n}\n\n/**\n * React hook to wrap `IntersectionObserver`.\n *\n * This hook will create an `IntersectionObserver` and observe the ref passed to it.\n *\n * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.\n *\n * @param ref - The ref to observe\n * @param intersectionObserverOptions - The options to pass to the IntersectionObserver\n * @param options - The options to pass to the hook\n * @param callback - The callback to call when the intersection changes\n * @returns The IntersectionObserver instance\n * @example\n * ```tsx\n * const MyComponent = () => {\n * const ref = React.useRef<HTMLDivElement>(null)\n * useIntersectionObserver(\n *  ref,\n *  (entry) => { doSomething(entry) },\n *  { rootMargin: '10px' },\n *  { disabled: false }\n * )\n * return <div ref={ref} />\n * ```\n */\nexport function useIntersectionObserver<T extends Element>(\n  ref: React.RefObject<T | null>,\n  callback: (entry: IntersectionObserverEntry | undefined) => void,\n  intersectionObserverOptions: IntersectionObserverInit = {},\n  options: { disabled?: boolean } = {},\n) {\n  React.useEffect(() => {\n    if (\n      !ref.current ||\n      options.disabled ||\n      typeof IntersectionObserver !== 'function'\n    ) {\n      return\n    }\n\n    const observer = new IntersectionObserver(([entry]) => {\n      callback(entry)\n    }, intersectionObserverOptions)\n\n    observer.observe(ref.current)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [callback, intersectionObserverOptions, options.disabled, ref])\n}\n\n/**\n * React hook to take a `React.ForwardedRef` and returns a `ref` that can be used on a DOM element.\n *\n * @param ref - The forwarded ref\n * @returns The inner ref returned by `useRef`\n * @example\n * ```tsx\n * const MyComponent = React.forwardRef((props, ref) => {\n *  const innerRef = useForwardedRef(ref)\n *  return <div ref={innerRef} />\n * })\n * ```\n */\nexport function useForwardedRef<T>(ref?: React.ForwardedRef<T>) {\n  const innerRef = React.useRef<T>(null)\n  React.useImperativeHandle(ref, () => innerRef.current!, [])\n  return innerRef\n}\n"],"names":[],"mappings":";AAMA,MAAM,YAAY;AAMX,MAAM,WAEI,MAAc,SAAS;AAEjC,SAAS,kBACd,IACG;AACH,QAAM,QAAQ,MAAM,OAAO,EAAE;AAC7B,QAAM,UAAU;AAEhB,QAAM,MAAM,MAAM,OAAO,IAAI,SAAqB,MAAM,QAAQ,GAAG,IAAI,CAAC;AACxE,SAAO,IAAI;AACb;AAEO,MAAM,kBACX,OAAO,WAAW,cAAc,MAAM,kBAAkB,MAAM;AAKzD,SAAS,YAAe,OAAoB;AAEjD,QAAM,MAAM,MAAM,OAAqC;AAAA,IACrD;AAAA,IACA,MAAM;AAAA,EAAA,CACP;AAED,QAAM,UAAU,IAAI,QAAQ;AAK5B,MAAI,UAAU,SAAS;AACrB,QAAI,UAAU;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,IAAA;AAAA,EAEV;AAGA,SAAO,IAAI,QAAQ;AACrB;AA2BO,SAAS,wBACd,KACA,UACA,8BAAwD,CAAA,GACxD,UAAkC,IAClC;AACA,QAAM,UAAU,MAAM;AACpB,QACE,CAAC,IAAI,WACL,QAAQ,YACR,OAAO,yBAAyB,YAChC;AACA;AAAA,IACF;AAEA,UAAM,WAAW,IAAI,qBAAqB,CAAC,CAAC,KAAK,MAAM;AACrD,eAAS,KAAK;AAAA,IAChB,GAAG,2BAA2B;AAE9B,aAAS,QAAQ,IAAI,OAAO;AAE5B,WAAO,MAAM;AACX,eAAS,WAAA;AAAA,IACX;AAAA,EACF,GAAG,CAAC,UAAU,6BAA6B,QAAQ,UAAU,GAAG,CAAC;AACnE;AAeO,SAAS,gBAAmB,KAA6B;AAC9D,QAAM,WAAW,MAAM,OAAU,IAAI;AACrC,QAAM,oBAAoB,KAAK,MAAM,SAAS,SAAU,CAAA,CAAE;AAC1D,SAAO;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.147.0",
+  "version": "1.147.2",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -79,8 +79,8 @@
     "isbot": "^5.1.22",
     "tiny-invariant": "^1.3.3",
     "tiny-warning": "^1.0.3",
-    "@tanstack/history": "1.145.7",
-    "@tanstack/router-core": "1.146.2"
+    "@tanstack/router-core": "1.147.1",
+    "@tanstack/history": "1.145.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/HeadContent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { escapeHtml } from '@tanstack/router-core'
+import { buildDevStylesUrl, escapeHtml } from '@tanstack/router-core'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import { useRouterState } from './useRouterState'
@@ -211,7 +211,6 @@ export const useTags = () => {
  */
 function DevStylesLink() {
   const router = useRouter()
-
   const routeIds = useRouterState({
     select: (state) => state.matches.map((match) => match.routeId),
   })
@@ -223,8 +222,7 @@ function DevStylesLink() {
       .forEach((el) => el.remove())
   }, [])
 
-  // Build the same href on both server and client for hydration match
-  const href = `/@tanstack-start/styles.css?routes=${encodeURIComponent(routeIds.join(','))}`
+  const href = buildDevStylesUrl(router.basepath, routeIds)
 
   return (
     <link

package/src/awaited.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 import { TSR_DEFERRED_PROMISE, defer } from '@tanstack/router-core'
+import { reactUse } from './utils'
 
 export type AwaitOptions<T> = {
   promise: Promise<T>
@@ -8,9 +9,8 @@ export type AwaitOptions<T> = {
 
 /** Suspend until a deferred promise resolves or rejects and return its data. */
 export function useAwaited<T>({ promise: _promise }: AwaitOptions<T>): T {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (React.use) {
-    const data = React.use(_promise)
+  if (reactUse) {
+    const data = reactUse(_promise)
     return data
   }
   const promise = defer(_promise)

package/src/lazyRouteComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { isModuleNotFoundError } from '@tanstack/router-core'
+import { reactUse } from './utils'
 import type { AsyncRouteComponent } from './route'
 
 /**
@@ -79,9 +80,8 @@ export function lazyRouteComponent<
     }
 
     if (!comp) {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (React.use) {
-        React.use(load())
+      if (reactUse) {
+        reactUse(load())
       } else {
         throw load()
       }

package/src/utils.ts

@@ -1,5 +1,19 @@
 import * as React from 'react'
 
+// Safe version of React.use() that will not cause compilation errors against
+// React 18 with Webpack, which statically analyzes imports and fails when it
+// sees React.use referenced (since 'use' is not exported from React 18).
+// This uses a dynamic string lookup to avoid the static analysis.
+const REACT_USE = 'use'
+
+/**
+ * React.use if available (React 19+), undefined otherwise.
+ * Use dynamic lookup to avoid Webpack compilation errors with React 18.
+ */
+export const reactUse:
+  | (<T>(usable: Promise<T> | React.Context<T>) => T)
+  | undefined = (React as any)[REACT_USE]
+
 export function useStableCallback<T extends (...args: Array<any>) => any>(
   fn: T,
 ): T {