@tanstack/react-router 1.168.1 → 1.168.2

package/dist/llms/rules/guide.js

@@ -8384,7 +8384,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 +8403,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 +8447,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 +8666,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 +8687,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

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-router",
-  "version": "1.168.1",
+  "version": "1.168.2",
   "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.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

package/src/Match.tsx

@@ -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
@@ -62,10 +66,15 @@ export const Match = React.memo(function MatchImpl({
   // 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
     }
 
@@ -312,10 +340,15 @@ export const MatchInner = React.memo(function MatchInnerImpl({
 
   // 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 +417,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 +524,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

@@ -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

@@ -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/renderRouteNotFound.tsx

@@ -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

@@ -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

@@ -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

@@ -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
 }