Migrate to TanStack Start RC

README.md

@@ -32,10 +32,10 @@ Clerk is a developer-first authentication and user management solution. It provi
 After following the [Clerk TanStack Start quickstart](https://clerk.com/docs/quickstarts/tanstack-start?utm_source=DevRel&utm_medium=docs&utm_campaign=templates&utm_content=08-05-2023&utm_term=clerk-tanstack-start-quickstart), you will have learned how to:
 
 - Create a new TanStack Start application
-- Install `@clerk/tanstack-start@beta`
+- Install `@clerk/tanstack-react-start`
 - Set up your environment keys
+- Add `clerkMiddleware()` to your app
 - Wrap your Root Component with `<ClerkProvider />`
-- Configure `clerkHandler()` in the server handler entrypoint
 - Use Clerk components to protect your content
 - Embed the `<SignInButton />` and `<SignOutButton />`
 - Deploy your application

package.json

@@ -11,26 +11,28 @@
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
-    "@clerk/tanstack-react-start": "^0.23.0",
-    "@tanstack/react-router": "^1.131.28",
-    "@tanstack/react-router-devtools": "^1.131.28",
-    "@tanstack/react-start": "^1.131.28",
+    "@clerk/tanstack-react-start": "^0.26.0",
+    "@tanstack/react-router": "^1.132.47",
+    "@tanstack/react-router-devtools": "^1.133.1",
+    "@tanstack/react-start": "^1.132.56",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "srvx": "0.8.15"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.1",
     "@eslint/js": "^9.31.0",
-    "@typescript-eslint/parser": "^8.37.0",
+    "@types/node": "^24.0.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.31.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "@types/node": "^24.0.14",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "autoprefixer": "^10.4.21",
     "prettier": "^3.6.2",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.37.0",

src/routeTree.gen.ts

@@ -57,3 +57,13 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { startInstance } from './start.ts'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+    config: Awaited<ReturnType<typeof startInstance.getOptions>>
+  }
+}

src/router.tsx

@@ -1,8 +1,8 @@
-import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 
-export function createRouter() {
-  const router = createTanStackRouter({
+export function getRouter() {
+  const router = createRouter({
     routeTree,
     defaultPreload: 'intent',
     defaultErrorComponent: (err) => <p>{err.error.stack}</p>,
@@ -15,6 +15,6 @@ export function createRouter() {
 
 declare module '@tanstack/react-router' {
   interface Register {
-    router: ReturnType<typeof createRouter>
+    router: ReturnType<typeof getRouter>
   }
 }

src/start.ts

@@ -0,0 +1,8 @@
+import { clerkMiddleware } from '@clerk/tanstack-react-start/server';
+import { createStart } from '@tanstack/react-start';
+
+export const startInstance = createStart(() => {
+  return {
+    requestMiddleware: [clerkMiddleware()],
+  };
+});

vite.config.ts

@@ -1,6 +1,7 @@
 import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import { defineConfig } from 'vite'
 import tsConfigPaths from 'vite-tsconfig-paths'
+import viteReact from '@vitejs/plugin-react'
 
 export default defineConfig({
   server: {
@@ -11,5 +12,6 @@ export default defineConfig({
       projects: ['./tsconfig.json'],
     }),
     tanstackStart(),
+    viteReact(),
   ],
 })