fix: migrate to @tanstack/start, upgrade deps

Author: tannerlinsley

app.config.mjs

@@ -13,12 +13,12 @@ import { fileURLToPath } from 'url'
 const customVite = () =>
   config('dev', (router, app, env) => ({
     // ssr: {
-    //   noExternal: [/react-router-server\/dist\/esm\/server-runtime/],
+    //   noExternal: [/start\/dist\/esm\/server-runtime/],
     //   external: ['react', 'react-dom'],
     // },
     // optimizeDeps: {
     //   include: [
-    //     'node_modules@tanstack/react-router-server/**/*.js',
+    //     'node_modules@tanstack/start/**/*.js',
     //     'react-icons',
     //     'shiki',
     //   ],
@@ -32,7 +32,7 @@ const customVite = () =>
               '@tanstack/store',
               '@tanstack/react-store',
               '@tanstack/react-router',
-              '@tanstack/react-router-server',
+              '@tanstack/start',
               '@tanstack/react-cross-context',
               '@tanstack/history',
               'use-sync-external-store',
@@ -79,7 +79,7 @@ export default createApp({
         }),
         tsconfigPaths(),
         serverTransform({
-          runtime: `@tanstack/react-router-server/server-runtime`,
+          runtime: `@tanstack/start/server-runtime`,
         }),
       ],
       link: {
@@ -101,18 +101,16 @@ export default createApp({
         customVite(),
         tsconfigPaths(),
         serverFunctions.client({
-          runtime: `@tanstack/react-router-server/client-runtime`,
+          runtime: `@tanstack/start/client-runtime`,
         }),
         reactRefresh(),
       ],
     },
     serverFunctions.router({
       name: 'server',
       plugins: () => [customVite(), tsconfigPaths()],
-      handler: resolveToRelative(
-        '@tanstack/react-router-server/server-handler'
-      ),
-      runtime: `@tanstack/react-router-server/server-runtime`,
+      handler: resolveToRelative('@tanstack/start/server-handler'),
+      runtime: `@tanstack/start/server-runtime`,
     }),
   ],
 })

app/client.tsx

@@ -4,7 +4,7 @@ import { hydrateRoot } from 'react-dom/client'
 import 'vinxi/client'
 
 import { createRouter } from './router'
-import { StartClient } from '@tanstack/react-router-server'
+import { StartClient } from '@tanstack/start'
 
 const router = createRouter()
 

app/routes/__root.tsx

@@ -13,7 +13,7 @@ import appCss from '~/styles/app.css?url'
 import carbonStyles from '~/styles/carbon.css?url'
 import { seo } from '~/utils/seo'
 import ogImage from '~/images/og.png'
-import { Meta, RouterManagedTag, Scripts } from '@tanstack/react-router-server'
+import { Meta, RouterManagedTag, Scripts } from '@tanstack/start'
 import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 import { NotFound } from '~/components/NotFound'
 import { CgSpinner } from 'react-icons/cg'

app/routes/blog.$.tsx

@@ -4,7 +4,7 @@ import removeMarkdown from 'remove-markdown'
 import { seo } from '~/utils/seo'
 import { Doc } from '~/components/Doc'
 import { PostNotFound } from './blog'
-import { createServerFn } from '@tanstack/react-router-server'
+import { createServerFn } from '@tanstack/start'
 
 const fetchBlogPost = createServerFn(
   'GET',

app/routes/blog.index.tsx

@@ -7,7 +7,7 @@ import { format } from 'date-fns'
 import { Footer } from '~/components/Footer'
 import { extractFrontMatter, fetchRepoFile } from '~/utils/documents.server'
 import { PostNotFound } from './blog'
-import { createServerFn } from '@tanstack/react-router-server'
+import { createServerFn } from '@tanstack/start'
 
 const fetchFrontMatters = createServerFn('GET', async () => {
   'use server'

app/routes/dashboard.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/react-router-server'
+import { createServerFn } from '@tanstack/start'
 import { redirectWithClearedCookie, requireAuthCookie } from '~/auth/auth'
 import { useMutation } from '~/hooks/useMutation'
 

app/routes/login.tsx

@@ -1,5 +1,5 @@
 import { createFileRoute, redirect } from '@tanstack/react-router'
-import { createServerFn, json } from '@tanstack/react-router-server'
+import { createServerFn, json } from '@tanstack/start'
 import { setAuthOnResponse } from '~/auth/auth'
 import { useMutation } from '~/hooks/useMutation'
 

app/server.tsx

@@ -3,18 +3,15 @@ import type { PipeableStream } from 'react-dom/server'
 import { renderToPipeableStream } from 'react-dom/server'
 import { eventHandler, getResponseHeaders, toWebRequest } from 'vinxi/server'
 import { getManifest } from 'vinxi/manifest'
-import {
-  StartServer,
-  transformStreamWithRouter,
-} from '@tanstack/react-router-server/server'
+import { StartServer, transformStreamWithRouter } from '@tanstack/start/server'
 // import { Transform, PassThrough } from 'node:stream'
 
 import { createRouter } from './router'
 import { createMemoryHistory } from '@tanstack/react-router'
 import {
   serverFnPayloadTypeHeader,
   serverFnReturnTypeHeader,
-} from '@tanstack/react-router-server'
+} from '@tanstack/start'
 import isbot from 'isbot'
 
 export default eventHandler(async (event) => {

app/server/sponsors.ts

@@ -6,7 +6,7 @@ import {
   getTierById,
   updateTiersMeta,
 } from '~/server/tiers'
-import { createServerFn, json } from '@tanstack/react-router-server'
+import { createServerFn, json } from '@tanstack/start'
 
 export type Sponsor = {
   login: string

app/utils/config.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod'
 import { fetchRepoFile } from './documents.server'
-import { createServerFn } from '@tanstack/react-router-server'
+import { createServerFn } from '@tanstack/start'
 
 export type MenuItem = {
   label: string | React.ReactNode

app/utils/docs.ts

@@ -1,7 +1,7 @@
 import { extractFrontMatter, fetchRepoFile } from '~/utils/documents.server'
 import removeMarkdown from 'remove-markdown'
 import { notFound } from '@tanstack/react-router'
-import { createServerFn, json } from '@tanstack/react-router-server'
+import { createServerFn, json } from '@tanstack/start'
 
 export const loadDocs = async ({
   repo,

package.json

@@ -24,10 +24,10 @@
     "@oramacloud/client": "^1.1.5",
     "@remix-run/node": "^2.8.1",
     "@tailwindcss/typography": "^0.5.13",
-    "@tanstack/react-router": "1.31.24",
-    "@tanstack/react-router-server": "1.31.24",
-    "@tanstack/router-devtools": "1.31.24",
+    "@tanstack/react-router": "1.31.25",
+    "@tanstack/router-devtools": "1.31.25",
     "@tanstack/router-vite-plugin": "1.31.18",
+    "@tanstack/start": "1.31.25",
     "@typescript-eslint/parser": "^7.2.0",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
@@ -84,7 +84,7 @@
     "overrides": {
       "@tanstack/react-router": "file:../router/packages/react-router",
       "@tanstack/router-devtools": "file:../router/packages/router-devtools",
-      "@tanstack/react-router-server": "file:../router/packages/react-router-server",
+      "@tanstack/start": "file:../router/packages/start",
       "@tanstack/react-cross-context": "file:../router/packages/react-cross-context",
       "@tanstack/history": "file:../router/packages/history",
       "@tanstack/react-store": "file:../router/packages/react-router/node_modules/@tanstack/react-store",

pnpm-lock.yaml

@@ -4,7 +4,7 @@ import path from 'path'
 const packages = {
   //   '@tanstack/react-router': 'router/packages/react-router',
   //   '@tanstack/router-devtools': 'router/packages/router-devtools',
-  '@tanstack/react-router-server': 'router/packages/react-router-server',
+  '@tanstack/start': 'router/packages/start',
   //   '@tanstack/react-cross-context': 'router/packages/react-cross-context',
   //   '@tanstack/history': 'router/packages/history',
   //   '@tanstack/react-store':