npm - @tanstack/react-router - Versions diffs - 1.168.1 → 1.168.3 - Mend

@tanstack/react-router 1.168.1 → 1.168.3

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.

Files changed (61) hide show

package/dist/cjs/HeadContent.cjs +2 -2
package/dist/cjs/HeadContent.cjs.map +1 -1
package/dist/cjs/HeadContent.d.cts +5 -1
package/dist/cjs/HeadContent.dev.cjs +2 -2
package/dist/cjs/HeadContent.dev.cjs.map +1 -1
package/dist/cjs/HeadContent.dev.d.cts +2 -1
package/dist/cjs/Match.cjs +37 -14
package/dist/cjs/Match.cjs.map +1 -1
package/dist/cjs/Matches.cjs +2 -4
package/dist/cjs/Matches.cjs.map +1 -1
package/dist/cjs/fileRoute.cjs +4 -6
package/dist/cjs/fileRoute.cjs.map +1 -1
package/dist/cjs/headContentUtils.cjs +11 -5
package/dist/cjs/headContentUtils.cjs.map +1 -1
package/dist/cjs/headContentUtils.d.cts +2 -2
package/dist/cjs/renderRouteNotFound.cjs +3 -3
package/dist/cjs/renderRouteNotFound.cjs.map +1 -1
package/dist/cjs/route.cjs +0 -2
package/dist/cjs/route.cjs.map +1 -1
package/dist/cjs/useMatch.cjs +8 -4
package/dist/cjs/useMatch.cjs.map +1 -1
package/dist/cjs/useRouter.cjs +3 -3
package/dist/cjs/useRouter.cjs.map +1 -1
package/dist/esm/HeadContent.d.ts +5 -1
package/dist/esm/HeadContent.dev.d.ts +2 -1
package/dist/esm/HeadContent.dev.js +2 -2
package/dist/esm/HeadContent.dev.js.map +1 -1
package/dist/esm/HeadContent.js +2 -2
package/dist/esm/HeadContent.js.map +1 -1
package/dist/esm/Match.js +38 -13
package/dist/esm/Match.js.map +1 -1
package/dist/esm/Matches.js +2 -3
package/dist/esm/Matches.js.map +1 -1
package/dist/esm/fileRoute.js +4 -4
package/dist/esm/fileRoute.js.map +1 -1
package/dist/esm/headContentUtils.d.ts +2 -2
package/dist/esm/headContentUtils.js +12 -6
package/dist/esm/headContentUtils.js.map +1 -1
package/dist/esm/renderRouteNotFound.js +3 -2
package/dist/esm/renderRouteNotFound.js.map +1 -1
package/dist/esm/route.js +0 -2
package/dist/esm/route.js.map +1 -1
package/dist/esm/useMatch.js +9 -4
package/dist/esm/useMatch.js.map +1 -1
package/dist/esm/useRouter.js +3 -2
package/dist/esm/useRouter.js.map +1 -1
package/dist/llms/rules/api.d.ts +1 -1
package/dist/llms/rules/api.js +10 -10
package/dist/llms/rules/guide.d.ts +1 -1
package/dist/llms/rules/guide.js +45 -6
package/package.json +2 -4
package/src/HeadContent.dev.tsx +3 -2
package/src/HeadContent.tsx +7 -2
package/src/Match.tsx +78 -26
package/src/Matches.tsx +3 -5
package/src/fileRoute.ts +7 -9
package/src/headContentUtils.tsx +29 -5
package/src/renderRouteNotFound.tsx +6 -6
package/src/route.tsx +0 -2
package/src/useMatch.tsx +19 -10
package/src/useRouter.tsx +7 -5

package/dist/llms/rules/guide.js CHANGED Viewed

@@ -2923,6 +2923,24 @@ The \`<HeadContent />\` component is **required** to render the head, title, met
 It should be **rendered either in the \`<head>\` tag of your root layout or as high up in the component tree as possible** if your application doesn't or can't manage the \`<head>\` tag.
+For manifest-managed assets, you can also set \`crossorigin\` values on emitted
+\`modulepreload\` and stylesheet links:
+\`\`\`tsx
+<HeadContent assetCrossOrigin="anonymous" />
+<HeadContent
+  assetCrossOrigin={{
+    modulepreload: 'anonymous',
+    stylesheet: 'use-credentials',
+  }}
+/>
+\`\`\`
+\`assetCrossOrigin\` only applies to manifest-managed asset links emitted by Start.
+If you also set \`crossOrigin\` via \`transformAssets\` (either the object shorthand
+or a callback return value), \`assetCrossOrigin\` wins.
 ### Start/Full-Stack Applications
 <!-- ::start:framework -->
@@ -8384,7 +8402,9 @@ For validation libraries we recommend using adapters which infer the correct \`i
 ### Zod
-An adapter is provided for [Zod](https://zod.dev/) which will pipe through the correct \`input\` type and \`output\` type
+An adapter is provided for [Zod](https://zod.dev/) which will pipe through the correct \`input\` type and \`output\` type.
+For Zod v3:
 \`\`\`tsx
 import { zodValidator } from '@tanstack/zod-adapter'
@@ -8401,13 +8421,30 @@ export const Route = createFileRoute('/shop/products/')({
 })
 \`\`\`
-The important part here is the following use of \`Link\` no longer requires \`search\` params
+With Zod v4, you should directly use the schema in \`validateSearch\`:
+\`\`\`tsx
+import { z } from 'zod'
+const productSearchSchema = z.object({
+  page: z.number().default(1),
+  filter: z.string().default(''),
+  sort: z.enum(['newest', 'oldest', 'price']).default('newest'),
+})
+export const Route = createFileRoute('/shop/products/')({
+  // With Zod v4, we can use the schema without the adapter
+  validateSearch: productSearchSchema,
+})
+\`\`\`
+The important part here is the following use of \`Link\` no longer requires \`search\` params:
 \`\`\`tsx
 <Link to="/shop/products" />
 \`\`\`
-However the use of \`catch\` here overrides the types and makes \`page\`, \`filter\` and \`sort\` \`unknown\` causing type loss. We have handled this case by providing a \`fallback\` generic function which retains the types but provides a \`fallback\` value when validation fails
+In Zod v3, the use of \`catch\` here overrides the types and makes \`page\`, \`filter\` and \`sort\` \`unknown\` causing type loss. We have handled this case by providing a \`fallback\` generic function which retains the types but provides a \`fallback\` value when validation fails:
 \`\`\`tsx
 import { fallback, zodValidator } from '@tanstack/zod-adapter'
@@ -8428,7 +8465,9 @@ export const Route = createFileRoute('/shop/products/')({
 Therefore when navigating to this route, \`search\` is optional and retains the correct types.
-While not recommended, it is also possible to configure \`input\` and \`output\` type in case the \`output\` type is more accurate than the \`input\` type
+In Zod v4, schemas may use \`catch\` instead of the fallback and will retain type inference throughout.
+While not recommended, it is also possible to configure \`input\` and \`output\` type in case the \`output\` type is more accurate than the \`input\` type:
 \`\`\`tsx
 const productSearchSchema = z.object({
@@ -8645,7 +8684,7 @@ Now that you've learned how to read your route's search params, you'll be happy
 The best way to update search params is to use the \`search\` prop on the \`<Link />\` component.
-If the search for the current page shall be updated and the \`from\` prop is specified, the \`to\` prop can be omitted.
+If the search for the current page shall be updated and the \`from\` prop is specified, the \`to\` prop can be omitted.
 Here's an example:
 \`\`\`tsx title="src/routes/shop/products.tsx"
@@ -8666,7 +8705,7 @@ const ProductList = () => {
 If you want to update the search params in a generic component that is rendered on multiple routes, specifying \`from\` can be challenging.
-In this scenario you can set \`to="."\` which will give you access to loosely typed search params.
+In this scenario you can set \`to="."\` which will give you access to loosely typed search params.
 Here is an example that illustrates this:
 \`\`\`tsx

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.168.1",
+  "version": "1.168.3",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -79,10 +79,8 @@
   "dependencies": {
     "@tanstack/react-store": "^0.9.2",
     "isbot": "^5.1.22",
-    "tiny-invariant": "^1.3.3",
-    "tiny-warning": "^1.0.3",
     "@tanstack/history": "1.161.6",
-    "@tanstack/router-core": "1.168.1"
+    "@tanstack/router-core": "1.168.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/HeadContent.dev.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import { useHydrated } from './ClientOnly'
 import { useTags } from './headContentUtils'
+import type { HeadContentProps } from './HeadContent'
 const DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'
@@ -15,8 +16,8 @@ const DEV_STYLES_ATTR = 'data-tanstack-router-dev-styles'
  *
  * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
  */
-export function HeadContent() {
-  const tags = useTags()
+export function HeadContent(props: HeadContentProps) {
+  const tags = useTags(props.assetCrossOrigin)
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
   const hydrated = useHydrated()

package/src/HeadContent.tsx CHANGED Viewed

@@ -2,14 +2,19 @@ import * as React from 'react'
 import { Asset } from './Asset'
 import { useRouter } from './useRouter'
 import { useTags } from './headContentUtils'
+import type { AssetCrossOriginConfig } from '@tanstack/router-core'
+export interface HeadContentProps {
+  assetCrossOrigin?: AssetCrossOriginConfig
+}
 /**
  * Render route-managed head tags (title, meta, links, styles, head scripts).
  * Place inside the document head of your app shell.
  * @link https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management
  */
-export function HeadContent() {
-  const tags = useTags()
+export function HeadContent(props: HeadContentProps) {
+  const tags = useTags(props.assetCrossOrigin)
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
   return (

package/src/Match.tsx CHANGED Viewed

@@ -1,10 +1,9 @@
 import * as React from 'react'
 import { useStore } from '@tanstack/react-store'
-import invariant from 'tiny-invariant'
-import warning from 'tiny-warning'
 import {
   createControlledPromise,
   getLocationChangeInfo,
+  invariant,
   isNotFound,
   isRedirect,
   rootRouteId,
@@ -33,10 +32,15 @@ export const Match = React.memo(function MatchImpl({
   if (isServer ?? router.isServer) {
     const match = router.stores.activeMatchStoresById.get(matchId)?.state
-    invariant(
-      match,
-      `Could not find match for matchId "${matchId}". Please file an issue!`,
-    )
+    if (!match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+        )
+      }
+      invariant()
+    }
     const routeId = match.routeId as string
     const parentRouteId = (router.routesById[routeId] as AnyRoute).parentRoute
@@ -60,12 +64,17 @@ export const Match = React.memo(function MatchImpl({
   // Subscribe directly to the match store from the pool.
   // The matchId prop is stable for this component's lifetime (set by Outlet),
   // and reconcileMatchPool reuses stores for the same matchId.
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const matchStore = router.stores.activeMatchStoresById.get(matchId)
-  invariant(
-    matchStore,
-    `Could not find match for matchId "${matchId}". Please file an issue!`,
-  )
+  if (!matchStore) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+      )
+    }
+    invariant()
+  }
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const resetKey = useStore(router.stores.loadedAt, (loadedAt) => loadedAt)
   // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -162,7 +171,9 @@ function MatchView({
             onCatch={(error, errorInfo) => {
               // Forward not found errors (we don't want to show the error component for these)
               if (isNotFound(error)) throw error
-              warning(false, `Error in route match: ${matchId}`)
+              if (process.env.NODE_ENV !== 'production') {
+                console.warn(`Warning: Error in route match: ${matchId}`)
+              }
               routeOnCatch?.(error, errorInfo)
             }}
           >
@@ -249,10 +260,15 @@ export const MatchInner = React.memo(function MatchInnerImpl({
   if (isServer ?? router.isServer) {
     const match = router.stores.activeMatchStoresById.get(matchId)?.state
-    invariant(
-      match,
-      `Could not find match for matchId "${matchId}". Please file an issue!`,
-    )
+    if (!match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+        )
+      }
+      invariant()
+    }
     const routeId = match.routeId as string
     const route = router.routesById[routeId] as AnyRoute
@@ -282,12 +298,24 @@ export const MatchInner = React.memo(function MatchInnerImpl({
     }
     if (match.status === 'notFound') {
-      invariant(isNotFound(match.error), 'Expected a notFound error')
+      if (!isNotFound(match.error)) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error('Invariant failed: Expected a notFound error')
+        }
+        invariant()
+      }
       return renderRouteNotFound(router, route, match.error)
     }
     if (match.status === 'redirected') {
-      invariant(isRedirect(match.error), 'Expected a redirect error')
+      if (!isRedirect(match.error)) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw new Error('Invariant failed: Expected a redirect error')
+        }
+        invariant()
+      }
       throw router.getMatch(match.id)?._nonReactive.loadPromise
     }
@@ -310,12 +338,16 @@ export const MatchInner = React.memo(function MatchInnerImpl({
     return out
   }
-  // eslint-disable-next-line react-hooks/rules-of-hooks
   const matchStore = router.stores.activeMatchStoresById.get(matchId)
-  invariant(
-    matchStore,
-    `Could not find match for matchId "${matchId}". Please file an issue!`,
-  )
+  if (!matchStore) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `Invariant failed: Could not find match for matchId "${matchId}". Please file an issue!`,
+      )
+    }
+    invariant()
+  }
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const match = useStore(matchStore, (value) => value)
   const routeId = match.routeId as string
@@ -384,14 +416,26 @@ export const MatchInner = React.memo(function MatchInnerImpl({
   }
   if (match.status === 'notFound') {
-    invariant(isNotFound(match.error), 'Expected a notFound error')
+    if (!isNotFound(match.error)) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error('Invariant failed: Expected a notFound error')
+      }
+      invariant()
+    }
     return renderRouteNotFound(router, route, match.error)
   }
   if (match.status === 'redirected') {
     // Redirects should be handled by the router transition. If we happen to
     // encounter a redirect here, it's a bug. Let's warn, but render nothing.
-    invariant(isRedirect(match.error), 'Expected a redirect error')
+    if (!isRedirect(match.error)) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error('Invariant failed: Expected a redirect error')
+      }
+      invariant()
+    }
     // warning(
     //   false,
@@ -479,7 +523,15 @@ export const Outlet = React.memo(function OutletImpl() {
   ) : null
   if (parentGlobalNotFound) {
-    invariant(route, 'Could not resolve route for Outlet render')
+    if (!route) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          'Invariant failed: Could not resolve route for Outlet render',
+        )
+      }
+      invariant()
+    }
     return renderRouteNotFound(router, route, undefined)
   }

package/src/Matches.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import warning from 'tiny-warning'
 import { useStore } from '@tanstack/react-store'
 import { replaceEqualDeep, rootRouteId } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
@@ -100,11 +99,10 @@ function MatchesInner() {
           onCatch={
             process.env.NODE_ENV !== 'production'
               ? (error) => {
-                  warning(
-                    false,
-                    `The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
+                  console.warn(
+                    `Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`,
                   )
-                  warning(false, error.message || error.toString())
+                  console.warn(`Warning: ${error.message || error.toString()}`)
                 }
               : undefined
           }

package/src/fileRoute.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import warning from 'tiny-warning'
 import { createRoute } from './route'
 import { useMatch } from './useMatch'
@@ -151,10 +150,11 @@ export class FileRoute<
     THandlers
   > => {
     if (process.env.NODE_ENV !== 'production') {
-      warning(
-        this.silent,
-        'FileRoute is deprecated and will be removed in the next major version. Use the createFileRoute(path)(options) function instead.',
-      )
+      if (!this.silent) {
+        console.warn(
+          'Warning: FileRoute is deprecated and will be removed in the next major version. Use the createFileRoute(path)(options) function instead.',
+        )
+      }
     }
     const route = createRoute(options as any)
     ;(route as any).isRoot = false
@@ -187,9 +187,8 @@ export function FileRouteLoader<
   >,
 ) => TLoaderFn {
   if (process.env.NODE_ENV !== 'production') {
-    warning(
-      false,
-      `FileRouteLoader is deprecated and will be removed in the next major version. Please place the loader function in the the main route file, inside the \`createFileRoute('/path/to/file')(options)\` options`,
+    console.warn(
+      `Warning: FileRouteLoader is deprecated and will be removed in the next major version. Please place the loader function in the the main route file, inside the \`createFileRoute('/path/to/file')(options)\` options`,
     )
   }
   return (loaderFn) => loaderFn as any
@@ -218,7 +217,6 @@ export class LazyRoute<TRoute extends AnyRoute> {
     } & LazyRouteOptions,
   ) {
     this.options = opts
-    ;(this as any).$$typeof = Symbol.for('react.memo')
   }
   useMatch: UseMatchRoute<TRoute['id']> = (opts) => {

package/src/headContentUtils.tsx CHANGED Viewed

@@ -1,14 +1,23 @@
 import * as React from 'react'
 import { useStore } from '@tanstack/react-store'
-import { deepEqual, escapeHtml } from '@tanstack/router-core'
+import {
+  deepEqual,
+  escapeHtml,
+  getAssetCrossOrigin,
+  resolveManifestAssetLink,
+} from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
 import { useRouter } from './useRouter'
-import type { RouterManagedTag } from '@tanstack/router-core'
+import type {
+  AssetCrossOriginConfig,
+  RouterManagedTag,
+} from '@tanstack/router-core'
 function buildTagsFromMatches(
   router: ReturnType<typeof useRouter>,
   nonce: string | undefined,
   matches: Array<any>,
+  assetCrossOrigin?: AssetCrossOriginConfig,
 ): Array<RouterManagedTag> {
   const routeMeta = matches.map((match) => match.meta!).filter(Boolean)
@@ -101,6 +110,9 @@ function buildTagsFromMatches(
           tag: 'link',
           attrs: {
             ...asset.attrs,
+            crossOrigin:
+              getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ??
+              asset.attrs?.crossOrigin,
             suppressHydrationWarning: true,
             nonce,
           },
@@ -114,11 +126,15 @@ function buildTagsFromMatches(
       router.ssr?.manifest?.routes[route.id]?.preloads
         ?.filter(Boolean)
         .forEach((preload) => {
+          const preloadLink = resolveManifestAssetLink(preload)
           preloadLinks.push({
             tag: 'link',
             attrs: {
               rel: 'modulepreload',
-              href: preload,
+              href: preloadLink.href,
+              crossOrigin:
+                getAssetCrossOrigin(assetCrossOrigin, 'modulepreload') ??
+                preloadLink.crossOrigin,
               nonce,
             },
           })
@@ -170,7 +186,7 @@ function buildTagsFromMatches(
  * Build the list of head/link/meta/script tags to render for active matches.
  * Used internally by `HeadContent`.
  */
-export const useTags = () => {
+export const useTags = (assetCrossOrigin?: AssetCrossOriginConfig) => {
   const router = useRouter()
   const nonce = router.options.ssr?.nonce
@@ -179,6 +195,7 @@ export const useTags = () => {
       router,
       nonce,
       router.stores.activeMatchesSnapshot.state,
+      assetCrossOrigin,
     )
   }
@@ -294,6 +311,9 @@ export const useTags = () => {
               tag: 'link',
               attrs: {
                 ...asset.attrs,
+                crossOrigin:
+                  getAssetCrossOrigin(assetCrossOrigin, 'stylesheet') ??
+                  asset.attrs?.crossOrigin,
                 suppressHydrationWarning: true,
                 nonce,
               },
@@ -317,11 +337,15 @@ export const useTags = () => {
           router.ssr?.manifest?.routes[route.id]?.preloads
             ?.filter(Boolean)
             .forEach((preload) => {
+              const preloadLink = resolveManifestAssetLink(preload)
               preloadLinks.push({
                 tag: 'link',
                 attrs: {
                   rel: 'modulepreload',
-                  href: preload,
+                  href: preloadLink.href,
+                  crossOrigin:
+                    getAssetCrossOrigin(assetCrossOrigin, 'modulepreload') ??
+                    preloadLink.crossOrigin,
                   nonce,
                 },
               })

package/src/renderRouteNotFound.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import warning from 'tiny-warning'
 import { DefaultGlobalNotFound } from './not-found'
 import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
@@ -21,11 +20,12 @@ export function renderRouteNotFound(
       return <router.options.defaultNotFoundComponent {...data} />
     }
-    if (process.env.NODE_ENV === 'development') {
-      warning(
-        route.options.notFoundComponent,
-        `A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
-      )
+    if (process.env.NODE_ENV !== 'production') {
+      if (!route.options.notFoundComponent) {
+        console.warn(
+          `Warning: A notFoundError was encountered on the route with ID "${route.id}", but a notFoundComponent option was not configured, nor was a router level defaultNotFoundComponent configured. Consider configuring at least one of these to avoid TanStack Router's overly generic defaultNotFoundComponent (<p>Not Found</p>)`,
+        )
+      }
     }
     return <DefaultGlobalNotFound />

package/src/route.tsx CHANGED Viewed

@@ -258,7 +258,6 @@ export class Route<
     >,
   ) {
     super(options)
-    ;(this as any).$$typeof = Symbol.for('react.memo')
   }
   useMatch: UseMatchRoute<TId> = (opts) => {
@@ -530,7 +529,6 @@ export class RootRoute<
     >,
   ) {
     super(options)
-    ;(this as any).$$typeof = Symbol.for('react.memo')
   }
   useMatch: UseMatchRoute<RootRouteId> = (opts) => {

package/src/useMatch.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
 import * as React from 'react'
 import { useStore } from '@tanstack/react-store'
-import { replaceEqualDeep } from '@tanstack/router-core'
+import { invariant, replaceEqualDeep } from '@tanstack/router-core'
 import { isServer } from '@tanstack/router-core/isServer'
-import invariant from 'tiny-invariant'
 import { dummyMatchContext, matchContext } from './matchContext'
 import { useRouter } from './useRouter'
 import type {
@@ -119,10 +118,15 @@ export function useMatch<
   if (isServer ?? router.isServer) {
     const match = matchStore?.state
-    invariant(
-      !((opts.shouldThrow ?? true) && !match),
-      `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-    )
+    if ((opts.shouldThrow ?? true) && !match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+        )
+      }
+      invariant()
+    }
     if (match === undefined) {
       return undefined as any
@@ -139,10 +143,15 @@ export function useMatch<
   // eslint-disable-next-line react-hooks/rules-of-hooks -- condition is static
   return useStore(matchStore ?? dummyStore, (match) => {
-    invariant(
-      !((opts.shouldThrow ?? true) && !match),
-      `Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
-    )
+    if ((opts.shouldThrow ?? true) && !match) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+        )
+      }
+      invariant()
+    }
     if (match === undefined) {
       return undefined

package/src/useRouter.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import warning from 'tiny-warning'
 import { routerContext } from './routerContext'
 import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core'
@@ -17,9 +16,12 @@ export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
   warn?: boolean
 }): TRouter {
   const value = React.useContext(routerContext)
-  warning(
-    !((opts?.warn ?? true) && !value),
-    'useRouter must be used inside a <RouterProvider> component!',
-  )
+  if (process.env.NODE_ENV !== 'production') {
+    if ((opts?.warn ?? true) && !value) {
+      console.warn(
+        'Warning: useRouter must be used inside a <RouterProvider> component!',
+      )
+    }
+  }
   return value as any
 }