fix: strip invariant and warning strings from prod bundles

.changeset/light-coins-hear.md

@@ -0,0 +1,14 @@
+---
+'@tanstack/router-devtools-core': patch
+'@tanstack/react-start-client': patch
+'@tanstack/solid-start-client': patch
+'@tanstack/start-client-core': patch
+'@tanstack/start-server-core': patch
+'@tanstack/vue-start-client': patch
+'@tanstack/react-router': patch
+'@tanstack/solid-router': patch
+'@tanstack/router-core': patch
+'@tanstack/vue-router': patch
+---
+
+Replace tiny-invariant and tiny-warning with in-house solution for bundle-size

examples/react/start-convex-trellaux/convex/board.ts

@@ -1,4 +1,4 @@
-import invariant from 'tiny-invariant'
+import { invariant } from './invariant'
 import { v } from 'convex/values'
 import {
   type QueryCtx,

examples/react/start-convex-trellaux/convex/invariant.ts

@@ -0,0 +1,5 @@
+export function invariant(value: unknown, message?: string): asserts value {
+  if (!value) {
+    throw new Error(message ?? 'Invariant failed')
+  }
+}

examples/react/start-convex-trellaux/package.json

@@ -28,7 +28,6 @@
     "react-hot-toast": "^2.5.1",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.6.0",
-    "tiny-invariant": "^1.3.3",
     "zod": "^3.24.2"
   },
   "devDependencies": {

examples/react/start-convex-trellaux/src/components/Board.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react'
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { convexQuery } from '@convex-dev/react-query'
 import { api } from '../../convex/_generated/api.js'

examples/react/start-convex-trellaux/src/components/Card.tsx

@@ -1,4 +1,4 @@
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 import { forwardRef, useState } from 'react'
 
 import { CONTENT_TYPES } from '../types'

examples/react/start-convex-trellaux/src/components/Column.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
-import invariant from 'tiny-invariant'
 import { twMerge } from 'tailwind-merge'
 
 import { flushSync } from 'react-dom'
+import { invariant } from '../invariant'
 import { CONTENT_TYPES } from '../types'
 import { Icon } from '../icons/icons'
 import {

examples/react/start-convex-trellaux/src/components/NewCard.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react'
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 
 import { ItemMutationFields } from '../types'
 import { useCreateItemMutation } from '../queries'

examples/react/start-convex-trellaux/src/components/NewColumn.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 
 import { Icon } from '../icons/icons'
 import { useCreateColumnMutation } from '../queries'

examples/react/start-convex-trellaux/src/invariant.ts

@@ -0,0 +1,5 @@
+export function invariant(value: unknown, message?: string): asserts value {
+  if (!value) {
+    throw new Error(message ?? 'Invariant failed')
+  }
+}

examples/react/start-trellaux/package.json

@@ -23,7 +23,6 @@
     "react-hot-toast": "^2.5.1",
     "redaxios": "^0.5.1",
     "tailwind-merge": "^2.6.0",
-    "tiny-invariant": "^1.3.3",
     "zod": "^3.24.2"
   },
   "devDependencies": {

examples/react/start-trellaux/src/components/Board.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useRef } from 'react'
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { boardQueries, useUpdateBoardMutation } from '../queries.js'
 import { NewColumn } from './NewColumn.js'

examples/react/start-trellaux/src/components/Card.tsx

@@ -1,4 +1,4 @@
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 import { forwardRef, useState } from 'react'
 
 import { CONTENT_TYPES } from '../types'

examples/react/start-trellaux/src/components/Column.tsx

@@ -1,8 +1,8 @@
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
-import invariant from 'tiny-invariant'
 import { twMerge } from 'tailwind-merge'
 
 import { flushSync } from 'react-dom'
+import { invariant } from '../invariant'
 import { CONTENT_TYPES } from '../types'
 import { Icon } from '../icons/icons'
 import {

examples/react/start-trellaux/src/components/NewCard.tsx

@@ -1,5 +1,5 @@
 import { useRef } from 'react'
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 
 import { ItemMutationFields } from '../types'
 import { useCreateItemMutation } from '../queries'

examples/react/start-trellaux/src/components/NewColumn.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 
 import { Icon } from '../icons/icons'
 import { useCreateColumnMutation } from '../queries'

examples/react/start-trellaux/src/db/board.ts

@@ -1,6 +1,6 @@
 import crypto from 'node:crypto'
 import { createServerFn } from '@tanstack/react-start'
-import invariant from 'tiny-invariant'
+import { invariant } from '../invariant'
 import * as z from 'zod'
 import {
   deleteColumnSchema,

examples/react/start-trellaux/src/invariant.ts

@@ -0,0 +1,5 @@
+export function invariant(value: unknown, message?: string): asserts value {
+  if (!value) {
+    throw new Error(message ?? 'Invariant failed')
+  }
+}

packages/react-router/package.json

@@ -99,9 +99,7 @@
     "@tanstack/history": "workspace:*",
     "@tanstack/react-store": "^0.9.2",
     "@tanstack/router-core": "workspace:*",
-    "isbot": "^5.1.22",
-    "tiny-invariant": "^1.3.3",
-    "tiny-warning": "^1.0.3"
+    "isbot": "^5.1.22"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",

packages/react-router/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)
   }
 

packages/react-router/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
           }

packages/react-router/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