TanStack Start Skill

⚠️ Status: Production Ready (RC v1.154.0)

TanStack Start is a full-stack React framework built on TanStack Router. It provides type-safe routing, server functions, SSR/streaming, and first-class Cloudflare Workers support.

Current Package: @tanstack/react-start@1.154.0 (Jan 21, 2026)

Production Readiness:

• ✅ RC v1.154.0 stable (v1.0 expected soon)
• ✅ Memory leak issue (#5734) resolved Jan 5, 2026
• ✅ Migrated to Vite from Vinxi (v1.121.0, June 2025)
• ✅ Production deployments on Cloudflare Workers validated

This skill prevents 9 documented errors and provides comprehensive guidance for Cloudflare Workers deployment, migrations, and server function patterns.

---

Table of Contents

• Quick Start
• Migration from Vinxi to Vite
• Cloudflare Workers Deployment
• Server Functions
• Authentication Patterns
• Database Integration
• Known Issues Prevention
• Performance Optimization

---

Quick Start

Installation

# Create new project (uses Vite)
npm create cloudflare@latest my-app -- --framework=tanstack-start
cd my-app

# Install dependencies
npm install

# Development
npm run dev

# Build and deploy
npm run build
wrangler deploy

Dependencies

{
  "dependencies": {
    "@tanstack/react-start": "^1.154.0",
    "@tanstack/react-router": "latest",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "vite": "latest",
    "@cloudflare/vite-plugin": "latest",
    "wrangler": "latest"
  }
}

---

Migration from Vinxi to Vite (v1.121.0+)

Timeline: TanStack Start migrated from Vinxi to Vite in v1.121.0 (released June 10, 2025).

Breaking Changes

Migration Steps

# 1. Remove Vinxi
npm uninstall vinxi @tanstack/start

# 2. Install Vite and framework-specific adapter
npm install vite @tanstack/react-start @cloudflare/vite-plugin

# 3. Delete old config
rm app.config.ts

# 4. Delete default entry files (unless customized)
rm app/ssr.tsx app/client.tsx

# 5. Rename customized entries
mv app/ssr.tsx app/server.tsx  # If you customized SSR entry

# 6. Move source files (optional, for consistency)
mv app/ src/

Create vite.config.ts

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  plugins: [
    tanstackStart(),
    cloudflare({
      viteEnvironment: { name: 'ssr' } // Required for Workers
    })
  ]
})

Update package.json Scripts

{
  "scripts": {
    "dev": "vite dev --port 3000",
    "build": "vite build",
    "start": "node .output/server/index.mjs"
  }
}

Update API Routes

// Old (Vinxi)
import { createAPIFileRoute } from '@tanstack/start/api'

export const Route = createAPIFileRoute('/api/users')({
  GET: async () => {
    return { users: [] }
  }
})

// New (Vite)
import { createServerFileRoute } from '@tanstack/react-start/api'

export const Route = createServerFileRoute('/api/users').methods({
  GET: async () => {
    return { users: [] }
  }
})

Common Migration Errors

Error: "invariant failed: could not find the nearest match" Cause: Old Vinxi route definitions mixed with Vite config Fix: Update all createAPIFileRoute() → createServerFileRoute().methods()

Error: "SyntaxError: The requested module '@tanstack/router-generator' does not provide an export named 'CONSTANTS'" Cause: Conflicting Vinxi/Vite dependencies Fix: Delete node_modules/, package-lock.json, reinstall

Issue: Auto-generated app.config.timestamp_* files duplicating Cause: Old Vinxi config interfering Fix: Delete all app.config.* files, restart dev server

Reference: Official Migration Guide | LogRocket Migration Article

---

Cloudflare Workers Deployment

Required Configuration

wrangler.toml (or wrangler.jsonc)

name = "my-app"
compatibility_date = "2026-01-21"
compatibility_flags = ["nodejs_compat"] # REQUIRED

# REQUIRED: Point to TanStack Start's server entry
main = "@tanstack/react-start/server-entry"

[observability]
enabled = true # Optional: Enable mon

...