useTRPC() can only be used inside of a <TRPCProvider>

[khanakia]

I just installed the tanstack app using npm create @tanstack/start@latest and selected the TRPC support

When i got to the http://localhost:3000/demo/trpc-todo it throws the error

useTRPC() can only be used inside of a <TRPCProvider>

PS: This example here https://tanstack.com/start/latest/docs/framework/react/examples/with-trpc?path=examples%2Freact%2Fwith-trpc%2Fsrc%2Fmain.tsx seems to be outdate also=

[wesleysmyth]

This is a known issue with the TanStack Start + tRPC scaffold template. The generated code is missing the TRPCProvider wrapper.

Quick fix

Check your app/routes/__root.tsx (or app/root.tsx). You need to wrap your app in the tRPC provider. Here's what it should look like:

// app/routes/__root.tsx
import { createRootRoute, Outlet } from "@tanstack/react-router";
import { TRPCProvider } from "~/trpc/react";

export const Route = createRootRoute({
  component: RootComponent,
});

function RootComponent() {
  return (
    <TRPCProvider>
      <Outlet />
    </TRPCProvider>
  );
}

If TRPCProvider doesn't exist yet

You'll need to create the provider that wraps tRPC's React Query integration:

// app/trpc/react.tsx
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { createTRPCContext } from "@trpc/tanstack-react-query";
import { useState } from "react";
import type { AppRouter } from "~/server/router";
import SuperJSON from "superjson";

export const { TRPCProvider, useTRPC } = createTRPCContext<AppRouter>();

export function TRPCReactProvider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    createTRPCClient<AppRouter>({
      links: [
        httpBatchLink({
          url: "/api/trpc",
          transformer: SuperJSON,
        }),
      ],
    })
  );

  return (
    <QueryClientProvider client={queryClient}>
      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
        {children}
      </TRPCProvider>
    </QueryClientProvider>
  );
}

Then wrap with TRPCReactProvider in your root:

function RootComponent() {
  return (
    <TRPCReactProvider>
      <Outlet />
    </TRPCReactProvider>
  );
}

Note on the template

The TanStack Start + tRPC example at tanstack.com/start/latest/docs/framework/react/examples/with-trpc is indeed outdated — it was written for an earlier version of the @trpc/tanstack-react-query integration. The API changed in tRPC v11 to use createTRPCContext() instead of createTRPCReact().

You may want to check the tRPC + TanStack Start guide for the latest setup.