T
TanStack2mo ago
variable-lime

Migration Guide to go from Tanstack Start Beta to RC?

I think someone might have posted a migration guide from tanstack start beta to RC but I can't find it anymore. I would appreciate if anyone could point me in that direction. I'm running into some issues like this.
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import babel from 'vite-plugin-babel'

export default defineConfig({
server: {
port: 3000,
},
plugins: [
tailwindcss(),
tsConfigPaths({
projects: ['./tsconfig.json'],
}),
tanstackStart({
customViteReactPlugin: true,
react: {
babel: {
plugins: ['babel-plugin-react-compiler'],
},
},
target: 'vercel',
}),
react(),
],
})
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import { defineConfig } from 'vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'
import babel from 'vite-plugin-babel'

export default defineConfig({
server: {
port: 3000,
},
plugins: [
tailwindcss(),
tsConfigPaths({
projects: ['./tsconfig.json'],
}),
tanstackStart({
customViteReactPlugin: true,
react: {
babel: {
plugins: ['babel-plugin-react-compiler'],
},
},
target: 'vercel',
}),
react(),
],
})
That worked on the beta
[{
"resource": "/home/remus/Programming Content/memorylink-reborn/vite.config.ts",
"owner": "typescript",
"code": "2353",
"severity": 8,
"message": "Object literal may only specify known properties, and 'customViteReactPlugin' does not exist in type '{ client?: { base?: string | undefined; entry?: string | undefined; } | undefined; server?: { entry?: string | undefined; } | undefined; spa?: { enabled?: boolean | undefined; prerender?: { ...; } | undefined; maskPath?: string | undefined; } | undefined; ... 7 more ...; vite?: { ...; } | undefined; }'.",
"source": "ts",
"startLineNumber": 18,
"startColumn": 7,
"endLineNumber": 18,
"endColumn": 28,
"modelVersionId": 25
}]
[{
"resource": "/home/remus/Programming Content/memorylink-reborn/vite.config.ts",
"owner": "typescript",
"code": "2353",
"severity": 8,
"message": "Object literal may only specify known properties, and 'customViteReactPlugin' does not exist in type '{ client?: { base?: string | undefined; entry?: string | undefined; } | undefined; server?: { entry?: string | undefined; } | undefined; spa?: { enabled?: boolean | undefined; prerender?: { ...; } | undefined; maskPath?: string | undefined; } | undefined; ... 7 more ...; vite?: { ...; } | undefined; }'.",
"source": "ts",
"startLineNumber": 18,
"startColumn": 7,
"endLineNumber": 18,
"endColumn": 28,
"modelVersionId": 25
}]
2 Replies
variable-lime
variable-limeOP2mo ago
also code like this used to work but now I get errors
import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
import { Card, CardContent, CardHeader, CardTitle } from '#/components/ui/card'
import { Fragment } from 'react'
import { homeScreenNavigationItems } from '@/tanstack-utils/navigation'
import { useQuery } from 'convex/react'
import { api } from '@/convex/_generated/api'
import ReactFlowBrowsingSession from '#/components/browsing-sessions/react-flow-browsing-session'
import { Skeleton } from '#/components/ui/skeleton'
import { useSidebar } from '#/components/ui/sidebar'
import { useReactFlowBrowsingSessionContext } from '#/react-context-not-shared/react-flow-browsing-session-context'
import { convexQuery } from '@convex-dev/react-query'
import { useSuspenseQuery } from '@tanstack/react-query'

export const Route = createFileRoute('/_authed/home')({
component: RouteComponent,
loader: async (opts) => {
const queryClient = opts.context.queryClient

queryClient.ensureQueryData(
convexQuery(
api.webApp.queries.browsingSessions.getLastBrowsingSession
.getLastBrowsingSessionQuery,
{},
),
)
},
})
import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
import { Card, CardContent, CardHeader, CardTitle } from '#/components/ui/card'
import { Fragment } from 'react'
import { homeScreenNavigationItems } from '@/tanstack-utils/navigation'
import { useQuery } from 'convex/react'
import { api } from '@/convex/_generated/api'
import ReactFlowBrowsingSession from '#/components/browsing-sessions/react-flow-browsing-session'
import { Skeleton } from '#/components/ui/skeleton'
import { useSidebar } from '#/components/ui/sidebar'
import { useReactFlowBrowsingSessionContext } from '#/react-context-not-shared/react-flow-browsing-session-context'
import { convexQuery } from '@convex-dev/react-query'
import { useSuspenseQuery } from '@tanstack/react-query'

export const Route = createFileRoute('/_authed/home')({
component: RouteComponent,
loader: async (opts) => {
const queryClient = opts.context.queryClient

queryClient.ensureQueryData(
convexQuery(
api.webApp.queries.browsingSessions.getLastBrowsingSession
.getLastBrowsingSessionQuery,
{},
),
)
},
})
Like the one below
[{
"resource": "/home/remus/Programming Content/memorylink-reborn/src/routes/_authed/home.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type '(opts: LoaderFnContext<Register, Route<Register, RootRoute<Register, undefined, { queryClient: QueryClient; convexClient: ConvexReactClient; convexQueryClient: ConvexQueryClient; }, ... 8 more ..., undefined>, ... 15 more ..., undefined>, ... 7 more ..., undefined>) => Promise<...>' is not assignable to type '(ctx: LoaderFnContext<Register, Route<Register, RootRoute<Register, undefined, { queryClient: QueryClient; convexClient: ConvexReactClient; convexQueryClient: ConvexQueryClient; }, ... 8 more ..., undefined>, ... 15 more ..., undefined>, ... 7 more ..., undefined>) => never'.\n Type 'Promise<void>' is not assignable to type 'never'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 3,
"endLineNumber": 21,
"endColumn": 9,
"modelVersionId": 5
},{
"resource": "/home/remus/Programming Content/memorylink-reborn/src/routes/_authed/home.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type 'string | number | symbol' is not assignable to type 'Key | null | undefined'.\n Type 'symbol' is not assignable to type 'Key | null | undefined'.",
"source": "ts",
"startLineNumber": 100,
"startColumn": 23,
"endLineNumber": 100,
"endColumn": 26,
"relatedInformation": [
{
"startLineNumber": 250,
"startColumn": 9,
"endLineNumber": 250,
"endColumn": 12,
"message": "The expected type comes from property 'key' which is declared here on type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>'",
"resource": "/home/remus/Programming Content/memorylink-reborn/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts"
}
],
"modelVersionId": 5
}]
[{
"resource": "/home/remus/Programming Content/memorylink-reborn/src/routes/_authed/home.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type '(opts: LoaderFnContext<Register, Route<Register, RootRoute<Register, undefined, { queryClient: QueryClient; convexClient: ConvexReactClient; convexQueryClient: ConvexQueryClient; }, ... 8 more ..., undefined>, ... 15 more ..., undefined>, ... 7 more ..., undefined>) => Promise<...>' is not assignable to type '(ctx: LoaderFnContext<Register, Route<Register, RootRoute<Register, undefined, { queryClient: QueryClient; convexClient: ConvexReactClient; convexQueryClient: ConvexQueryClient; }, ... 8 more ..., undefined>, ... 15 more ..., undefined>, ... 7 more ..., undefined>) => never'.\n Type 'Promise<void>' is not assignable to type 'never'.",
"source": "ts",
"startLineNumber": 21,
"startColumn": 3,
"endLineNumber": 21,
"endColumn": 9,
"modelVersionId": 5
},{
"resource": "/home/remus/Programming Content/memorylink-reborn/src/routes/_authed/home.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type 'string | number | symbol' is not assignable to type 'Key | null | undefined'.\n Type 'symbol' is not assignable to type 'Key | null | undefined'.",
"source": "ts",
"startLineNumber": 100,
"startColumn": 23,
"endLineNumber": 100,
"endColumn": 26,
"relatedInformation": [
{
"startLineNumber": 250,
"startColumn": 9,
"endLineNumber": 250,
"endColumn": 12,
"message": "The expected type comes from property 'key' which is declared here on type 'IntrinsicAttributes & ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement>'",
"resource": "/home/remus/Programming Content/memorylink-reborn/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts"
}
],
"modelVersionId": 5
}]
genetic-orange
genetic-orange2mo ago
GitHub
Start BETA - Tracking · TanStack router · Discussion #2863
Tracking any important changes for TanStack Start during the BETA period. If you are coming from the ALPHA of TanStack Start, you can see all the breaking changes that were made here - #2403

Did you find this page helpful?