@tanstack/create 0.61.1 → 0.61.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @tanstack/create
 
+## 0.61.3
+
+### Patch Changes
+
+- Improve generated React scaffold reliability and default lint ergonomics. ([`cc5857c`](https://github.com/TanStack/cli/commit/cc5857c5c212132852f37878e039071c5a9b1ac5))
+
+  - Migrate React template imports to package `imports` aliases (`#/*`) while preserving `@/*` compatibility during transition.
+  - Harden eslint toolchain templates for fresh apps by avoiding known parser/project and resolver issues.
+  - Fix generated shadcn utility import style for stricter eslint configs.
+  - Improve TanStack Form demo select contrast in dark mode.
+
+## 0.61.2
+
+### Patch Changes
+
+- Improve generated app reliability and CLI compatibility. ([`791bef6`](https://github.com/TanStack/cli/commit/791bef6b5472df5b5e2bffe5c1714c4052a97ac3))
+
+  - Fix React Query provider scaffolding (including Query + tRPC combinations) so generated apps build correctly.
+  - Fix Prisma add-on package template rendering by exposing package-manager execute helper in `package.json.ejs` context.
+  - Restore `--tailwind` and `--no-tailwind` as deprecated compatibility flags that are accepted but ignored with clear warnings.
+  - Align CLI/docs examples with the current Tailwind-always-on behavior.
+  - Update Convex demo import to type-only `Id` import to avoid runtime resolution issues.
+
 ## 0.61.1
 
 ### Patch Changes

package/dist/frameworks/react/add-ons/ai/assets/src/components/demo-AIAssistant.tsx

@@ -5,8 +5,8 @@ import { Store } from '@tanstack/store'
 import { Send, X, ChevronRight, BotIcon } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 
-import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
-import type { ChatMessages } from '@/lib/demo-ai-hook'
+import { useGuitarRecommendationChat } from '#/lib/demo-ai-hook'
+import type { ChatMessages } from '#/lib/demo-ai-hook'
 
 import GuitarRecommendation from './demo-GuitarRecommendation'
 

package/dist/frameworks/react/add-ons/ai/assets/src/components/demo-GuitarRecommendation.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from '@tanstack/react-router'
 
 import { showAIAssistant } from './demo-AIAssistant'
 
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 export default function GuitarRecommendation({ id }: { id: string }) {
   const navigate = useNavigate()

package/dist/frameworks/react/add-ons/ai/assets/src/lib/demo-ai-hook.ts

@@ -6,7 +6,7 @@ import {
 import type { InferChatMessages } from '@tanstack/ai-react'
 import { clientTools } from '@tanstack/ai-client'
 
-import { recommendGuitarToolDef } from '@/lib/demo-guitar-tools'
+import { recommendGuitarToolDef } from '#/lib/demo-guitar-tools'
 
 const recommendGuitarToolClient = recommendGuitarToolDef.client(({ id }) => ({
   id: +id,

package/dist/frameworks/react/add-ons/ai/assets/src/lib/demo-guitar-tools.ts

@@ -1,6 +1,6 @@
 import { toolDefinition } from '@tanstack/ai'
 import { z } from 'zod'
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 // Tool definition for getting guitars
 export const getGuitarsToolDef = toolDefinition({

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/ai-chat.tsx

@@ -11,12 +11,12 @@ import {
 } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 
-import { useGuitarRecommendationChat } from '@/lib/demo-ai-hook'
-import type { ChatMessages } from '@/lib/demo-ai-hook'
-import { useAudioRecorder } from '@/hooks/demo-useAudioRecorder'
-import { useTTS } from '@/hooks/demo-useTTS'
+import { useGuitarRecommendationChat } from '#/lib/demo-ai-hook'
+import type { ChatMessages } from '#/lib/demo-ai-hook'
+import { useAudioRecorder } from '#/hooks/demo-useAudioRecorder'
+import { useTTS } from '#/hooks/demo-useTTS'
 
-import GuitarRecommendation from '@/components/demo-GuitarRecommendation'
+import GuitarRecommendation from '#/components/demo-GuitarRecommendation'
 
 import './ai-chat.css'
 

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/api.ai.chat.ts

@@ -5,7 +5,7 @@ import { openaiText } from '@tanstack/ai-openai'
 import { geminiText } from '@tanstack/ai-gemini'
 import { ollamaText } from '@tanstack/ai-ollama'
 
-import { getGuitars, recommendGuitarToolDef } from '@/lib/demo-guitar-tools'
+import { getGuitars, recommendGuitarToolDef } from '#/lib/demo-guitar-tools'
 
 const SYSTEM_PROMPT = `You are a helpful assistant for a store that sells guitars.
 

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/$guitarId.tsx

@@ -1,6 +1,6 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 export const Route = createFileRoute('/demo/guitars/$guitarId')({
   component: RouteComponent,

package/dist/frameworks/react/add-ons/ai/assets/src/routes/demo/guitars/index.tsx

@@ -1,6 +1,6 @@
 import { Link, createFileRoute } from '@tanstack/react-router'
 
-import guitars from '@/data/demo-guitars'
+import guitars from '#/data/demo-guitars'
 
 export const Route = createFileRoute('/demo/guitars/')({
   component: GuitarsIndex,

package/dist/frameworks/react/add-ons/better-auth/assets/src/integrations/better-auth/header-user.tsx

@@ -1,4 +1,4 @@
-import { authClient } from "@/lib/auth-client";
+import { authClient } from "#/lib/auth-client";
 import { Link } from "@tanstack/react-router";
 
 export default function BetterAuthHeader() {

package/dist/frameworks/react/add-ons/better-auth/assets/src/routes/api/auth/$.ts

@@ -1,5 +1,5 @@
 import { createFileRoute } from '@tanstack/react-router'
-import { auth } from '@/lib/auth'
+import { auth } from '#/lib/auth'
 
 export const Route = createFileRoute('/api/auth/$')({
   server: {

package/dist/frameworks/react/add-ons/better-auth/assets/src/routes/demo/better-auth.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
-import { authClient } from "@/lib/auth-client";
+import { authClient } from "#/lib/auth-client";
 
 export const Route = createFileRoute("/demo/better-auth")({
   component: BetterAuthDemo,

package/dist/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -4,7 +4,7 @@ import { useQuery, useMutation } from 'convex/react'
 import { Trash2, Plus, Check, Circle } from 'lucide-react'
 
 import { api } from '../../../convex/_generated/api'
-import { Id } from '../../../convex/_generated/dataModel'
+import type { Id } from '../../../convex/_generated/dataModel'
 
 export const Route = createFileRoute('/demo/convex')({
   ssr: false,

package/dist/frameworks/react/add-ons/db/assets/src/components/demo.chat-area.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 
-import { useChat, useMessages } from '@/hooks/demo.useChat'
+import { useChat, useMessages } from '#/hooks/demo.useChat'
 
 import Messages from './demo.messages'
 

package/dist/frameworks/react/add-ons/db/assets/src/components/demo.messages.tsx

@@ -1,4 +1,4 @@
-import type { Message } from '@/db-collections'
+import type { Message } from '#/db-collections'
 
 export const getAvatarColor = (username: string) => {
   const colors = [

package/dist/frameworks/react/add-ons/db/assets/src/hooks/demo.useChat.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { useLiveQuery } from '@tanstack/react-db'
 
-import { messagesCollection, type Message } from '@/db-collections'
+import { messagesCollection, type Message } from '#/db-collections'
 
 import type { Collection } from '@tanstack/react-db'
 

package/dist/frameworks/react/add-ons/db/assets/src/routes/demo/db-chat.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-import ChatArea from '@/components/demo.chat-area'
+import ChatArea from '#/components/demo.chat-area'
 
 export const Route = createFileRoute('/demo/db-chat')({
   component: App,

package/dist/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs

@@ -1,8 +1,8 @@
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
-import { db } from '@/db/index'
+import { db } from '#/db/index'
 import { desc } from 'drizzle-orm'
-import { todos } from '@/db/schema'
+import { todos } from '#/db/schema'
 
 const getTodos = createServerFn({
   method: 'GET',

package/dist/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs

@@ -1,14 +1,14 @@
 import { useStore } from '@tanstack/react-form'
 
-import { useFieldContext, useFormContext } from '@/hooks/demo.form-context'
+import { useFieldContext, useFormContext } from '#/hooks/demo.form-context'
 <% if (addOnEnabled.shadcn) { %>
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import { Textarea as ShadcnTextarea } from '@/components/ui/textarea'
-import * as ShadcnSelect from '@/components/ui/select'
-import { Slider as ShadcnSlider } from '@/components/ui/slider'
-import { Switch as ShadcnSwitch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
+import { Button } from '#/components/ui/button'
+import { Input } from '#/components/ui/input'
+import { Textarea as ShadcnTextarea } from '#/components/ui/textarea'
+import * as ShadcnSelect from '#/components/ui/select'
+import { Slider as ShadcnSlider } from '#/components/ui/slider'
+import { Switch as ShadcnSwitch } from '#/components/ui/switch'
+import { Label } from '#/components/ui/label'
 
 export function SubscribeButton({ label }: { label: string }) {
   const form = useFormContext()
@@ -117,11 +117,15 @@ export function Select({
         <ShadcnSelect.SelectTrigger className="w-full">
           <ShadcnSelect.SelectValue placeholder={placeholder} />
         </ShadcnSelect.SelectTrigger>
-        <ShadcnSelect.SelectContent>
+        <ShadcnSelect.SelectContent className="bg-background text-foreground">
           <ShadcnSelect.SelectGroup>
             <ShadcnSelect.SelectLabel>{label}</ShadcnSelect.SelectLabel>
             {values.map((value) => (
-              <ShadcnSelect.SelectItem key={value.value} value={value.value}>
+              <ShadcnSelect.SelectItem
+                key={value.value}
+                value={value.value}
+                className="text-foreground"
+              >
                 {value.label}
               </ShadcnSelect.SelectItem>
             ))}
@@ -297,4 +301,4 @@ export function Select({
     </div>
   )
 }
-<% } %>
+<% } %>

package/dist/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs

@@ -1,6 +1,6 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 
-import { useAppForm } from '@/hooks/demo.form'
+import { useAppForm } from '#/hooks/demo.form'
 
 <% if (codeRouter) { %>
 import type { RootRoute } from '@tanstack/react-router'

package/dist/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs

@@ -1,7 +1,7 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { z } from 'zod'
 
-import { useAppForm } from '@/hooks/demo.form'
+import { useAppForm } from '#/hooks/demo.form'
 
 <% if (codeRouter) { %>
   import type { RootRoute } from '@tanstack/react-router'

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/demo/api.mcp-todos.ts

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
-import { addTodo, getTodos, subscribeToTodos } from '@/mcp-todos'
+import { addTodo, getTodos, subscribeToTodos } from '#/mcp-todos'
 
 export const Route = createFileRoute('/api/mcp-todos')({
   server: {

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/mcp.ts

@@ -2,9 +2,9 @@ import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
 import { createFileRoute } from '@tanstack/react-router'
 import z from 'zod'
 
-import { handleMcpRequest } from '@/utils/mcp-handler'
+import { handleMcpRequest } from '#/utils/mcp-handler'
 
-import { addTodo } from '@/mcp-todos'
+import { addTodo } from '#/mcp-todos'
 
 const server = new McpServer({
   name: 'start-server',

package/dist/frameworks/react/add-ons/neon/assets/src/routes/demo/neon.tsx

@@ -1,7 +1,7 @@
 import { createServerFn } from '@tanstack/react-start'
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 
-import { getClient } from '@/db'
+import { getClient } from '#/db'
 
 const getTodos = createServerFn({
   method: 'GET',

package/dist/frameworks/react/add-ons/oRPC/assets/src/orpc/client.ts

@@ -7,7 +7,7 @@ import { createIsomorphicFn } from '@tanstack/react-start'
 
 import type { RouterClient } from '@orpc/server'
 
-import router from '@/orpc/router'
+import router from '#/orpc/router'
 
 const getORPCClient = createIsomorphicFn()
   .server(() =>

package/dist/frameworks/react/add-ons/oRPC/assets/src/routes/api.$.ts

@@ -1,4 +1,4 @@
-import '@/polyfill'
+import '#/polyfill'
 
 import { OpenAPIHandler } from '@orpc/openapi/fetch'
 import { ZodToJsonSchemaConverter } from '@orpc/zod/zod4'
@@ -7,8 +7,8 @@ import { createFileRoute } from '@tanstack/react-router'
 import { onError } from '@orpc/server'
 import { OpenAPIReferencePlugin } from '@orpc/openapi/plugins'
 
-import { TodoSchema } from '@/orpc/schema'
-import router from '@/orpc/router'
+import { TodoSchema } from '#/orpc/schema'
+import router from '#/orpc/router'
 
 const handler = new OpenAPIHandler(router, {
   interceptors: [

package/dist/frameworks/react/add-ons/oRPC/assets/src/routes/api.rpc.$.ts

@@ -1,8 +1,8 @@
-import '@/polyfill'
+import '#/polyfill'
 
 import { RPCHandler } from '@orpc/server/fetch'
 import { createFileRoute } from '@tanstack/react-router'
-import router from '@/orpc/router'
+import router from '#/orpc/router'
 
 const handler = new RPCHandler(router)
 

package/dist/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery } from '@tanstack/react-query'
 
-import { orpc } from '@/orpc/client'
+import { orpc } from '#/orpc/client'
 
 export const Route = createFileRoute('/demo/orpc-todo')({
   component: ORPCTodos,

package/dist/frameworks/react/add-ons/paraglide/assets/src/components/LocaleSwitcher.tsx.ejs

@@ -1,8 +1,8 @@
 // Locale switcher refs:
 // - Paraglide docs: https://inlang.com/m/gerre34r/library-inlang-paraglideJs
 // - Router example: https://github.com/TanStack/router/tree/main/examples/react/i18n-paraglide#switching-locale
-import { getLocale, locales, setLocale } from '@/paraglide/runtime'
-import { m } from '@/paraglide/messages'
+import { getLocale, locales, setLocale } from '#/paraglide/runtime'
+import { m } from '#/paraglide/messages'
 
 export default function ParaglideLocaleSwitcher() {
   const currentLocale = getLocale()

package/dist/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import logo from "../logo.svg";
-import { m } from "@/paraglide/messages";
+import { m } from "#/paraglide/messages";
 import LocaleSwitcher from "../components/LocaleSwitcher";
 
 export const Route = createFileRoute("/demo/i18n")({

package/dist/frameworks/react/add-ons/prisma/assets/src/routes/demo/prisma.tsx.ejs

@@ -1,6 +1,6 @@
 import { createFileRoute, useRouter } from '@tanstack/react-router'
 import { createServerFn } from '@tanstack/react-start'
-import { prisma } from '@/db'
+import { prisma } from '#/db'
 
 const getTodos = createServerFn({
   method: 'GET',

package/dist/frameworks/react/add-ons/shadcn/assets/components.json

@@ -11,11 +11,11 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
+    "components": "#/components",
+    "utils": "#/lib/utils",
+    "ui": "#/components/ui",
+    "lib": "#/lib",
+    "hooks": "#/hooks"
   },
   "iconLibrary": "lucide"
 }

package/dist/frameworks/react/add-ons/shadcn/assets/src/lib/utils.ts

@@ -1,4 +1,5 @@
-import { clsx, type ClassValue } from "clsx"
+import type { ClassValue } from 'clsx'
+import { clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {

package/dist/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs

@@ -1,7 +1,7 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { useStore } from '@tanstack/react-store'
 
-import { fullName, store } from '@/lib/demo-store'
+import { fullName, store } from '#/lib/demo-store'
 <% if (codeRouter) { %>
 import type { RootRoute } from '@tanstack/react-router'
 <% } else { %>

package/dist/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx

@@ -1,11 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useState } from "react";
 
-import { Dialog } from "@/components/storybook/dialog";
-import { Input } from "@/components/storybook/input";
-import { RadioGroup } from "@/components/storybook/radio-group";
-import { Slider } from "@/components/storybook/slider";
-import { Button } from "@/components/storybook/button";
+import { Dialog } from "#/components/storybook/dialog";
+import { Input } from "#/components/storybook/input";
+import { RadioGroup } from "#/components/storybook/radio-group";
+import { Slider } from "#/components/storybook/slider";
+import { Button } from "#/components/storybook/button";
 
 export const Route = createFileRoute("/demo/storybook")({
   component: StorybookDemo,

package/dist/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi.tsx

@@ -1,4 +1,4 @@
-import { articles } from '@/lib/strapiClient'
+import { articles } from '#/lib/strapiClient'
 import { createFileRoute, Link } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/demo/strapi')({

package/dist/frameworks/react/add-ons/strapi/assets/src/routes/demo/strapi_.$articleId.tsx

@@ -1,4 +1,4 @@
-import { articles } from '@/lib/strapiClient'
+import { articles } from '#/lib/strapiClient'
 import { createFileRoute, Link } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/demo/strapi_/$articleId')({

package/dist/frameworks/react/add-ons/t3env/README.md

@@ -7,7 +7,7 @@
 ### Usage
 
 ```ts
-import { env } from "@/env";
+import { env } from "#/env";
 
 console.log(env.VITE_APP_TITLE);
 ```

package/dist/frameworks/react/add-ons/tRPC/assets/src/integrations/trpc/react.ts

@@ -1,4 +1,4 @@
 import { createTRPCContext } from "@trpc/tanstack-react-query";
-import type { TRPCRouter } from "@/integrations/trpc/router";
+import type { TRPCRouter } from "#/integrations/trpc/router";
 
 export const { TRPCProvider, useTRPC } = createTRPCContext<TRPCRouter>();

package/dist/frameworks/react/add-ons/tRPC/assets/src/routes/api.trpc.$.tsx

@@ -1,6 +1,6 @@
 import { createServerFileRoute } from '@tanstack/react-start/server'
 import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
-import { trpcRouter } from '@/integrations/trpc/router'
+import { trpcRouter } from '#/integrations/trpc/router'
 import { createFileRoute } from '@tanstack/react-router'
 
 function handler({ request }: { request: Request }) {

package/dist/frameworks/react/add-ons/tRPC/assets/src/routes/demo/trpc-todo.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 import { createFileRoute } from '@tanstack/react-router'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { useTRPC } from '@/integrations/trpc/react'
+import { useTRPC } from '#/integrations/trpc/react'
 
 export const Route = createFileRoute('/demo/trpc-todo')({
   component: TRPCTodos,

package/dist/frameworks/react/add-ons/table/assets/src/routes/demo/table.tsx.ejs

@@ -11,7 +11,7 @@ import {
 } from '@tanstack/react-table'
 import { compareItems, rankItem } from '@tanstack/match-sorter-utils'
 
-import { makeData } from '@/data/demo-table-data'
+import { makeData } from '#/data/demo-table-data'
 
 import type {
   Column,
@@ -24,7 +24,7 @@ import type { RankingInfo } from '@tanstack/match-sorter-utils'
 <% if (codeRouter) { %>
 import type { RootRoute } from '@tanstack/react-router'
 <% } %>
-import type { Person } from '@/data/demo-table-data'
+import type { Person } from '#/data/demo-table-data'
 <% if (fileRouter) { %>
 export const Route = createFileRoute('/demo/table')({
   component: TableDemo,

package/dist/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -1,10 +1,12 @@
 <% if (addOnEnabled.tRPC) { %>
-import { QueryClient } from "@tanstack/react-query";
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import superjson from "superjson";
 import { createTRPCClient, httpBatchStreamLink } from "@trpc/client";
 import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
 
-import type { TRPCRouter } from "@/integrations/trpc/router";
+import type { TRPCRouter } from "#/integrations/trpc/router";
+import { TRPCProvider } from '#/integrations/trpc/react'
 
 function getUrl() {
   const base = (() => {
@@ -23,7 +25,18 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
   ],
 });
 
+let context:
+  | {
+      queryClient: QueryClient
+      trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
+    }
+  | undefined
+
 export function getContext() {
+  if (context) {
+    return context
+  }
+
   const queryClient = new QueryClient({
     defaultOptions: {
       dehydrate: { serializeData: superjson.serialize },
@@ -35,18 +48,64 @@ export function getContext() {
     client: trpcClient,
     queryClient: queryClient,
   });
-  return {
+  context = {
     queryClient,
     trpc: serverHelpers,
-  };
+  }
+
+  return context
+}
+
+export default function TanStackQueryProvider({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const { queryClient } = getContext()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+        {children}
+      </TRPCProvider>
+    </QueryClientProvider>
+  )
 }
 <% } else { %>
-import { QueryClient } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+let context:
+  | {
+      queryClient: QueryClient
+    }
+  | undefined
 
 export function getContext() {
+  if (context) {
+    return context
+  }
+
   const queryClient = new QueryClient();
-  return {
+
+  context = {
     queryClient,
-  };
+  }
+
+  return context
+}
+
+export default function TanStackQueryProvider({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const { queryClient } = getContext()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  )
 }
 <% } %>

package/dist/frameworks/react/examples/events/assets/src/components/RemyAssistant.tsx

@@ -3,8 +3,8 @@ import { Send, X, ChefHat, Croissant } from 'lucide-react'
 import { Streamdown } from 'streamdown'
 import { Store } from '@tanstack/store'
 
-import { useConferenceChat } from '@/lib/conference-ai-hook'
-import type { ConferenceChatMessages } from '@/lib/conference-ai-hook'
+import { useConferenceChat } from '#/lib/conference-ai-hook'
+import type { ConferenceChatMessages } from '#/lib/conference-ai-hook'
 
 function Messages({ messages }: { messages: ConferenceChatMessages }) {
   const messagesContainerRef = useRef<HTMLDivElement>(null)

package/dist/frameworks/react/examples/events/assets/src/components/SpeakerCard.tsx

@@ -3,7 +3,7 @@ import { MapPin } from 'lucide-react'
 
 import { type Speaker } from 'content-collections'
 
-import { Card, CardContent } from '@/components/ui/card'
+import { Card, CardContent } from '#/components/ui/card'
 
 interface SpeakerCardProps {
   speaker: Speaker