Tried to access "$types.prototype" which is not available at runtime

Im getting this weird errors every thing was good until I migrated to trpc 11 which for some reason worked but after some time getting this ...
No description
M
MadMax19d ago
React.tsx
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpLink, loggerLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import SuperJSON from "superjson";

import { type AppRouter } from "@/server/api/root";

const createQueryClient = () => new QueryClient();

let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
if (typeof window === "undefined") {
// Server: always make a new query client
return createQueryClient();
}
// Browser: use singleton pattern to keep the same query client
return (clientQueryClientSingleton ??= createQueryClient());
};

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: { children: React.ReactNode }) {
const queryClient = getQueryClient();

const [trpcClient] = useState(() =>
api.createClient({
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
httpLink({
transformer: SuperJSON,
url: getBaseUrl() + "/api/trpc",
headers: () => {
const headers = new Headers();
headers.set("x-trpc-source", "nextjs-react");
return headers;
},
}),
],
}),
);

return (
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
);
}

function getBaseUrl() {
if (typeof window !== "undefined") return window.location.origin;
// if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
return `http://localhost:${process.env.PORT ?? 3000}`;
}
"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpLink, loggerLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import { useState } from "react";
import SuperJSON from "superjson";

import { type AppRouter } from "@/server/api/root";

const createQueryClient = () => new QueryClient();

let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
if (typeof window === "undefined") {
// Server: always make a new query client
return createQueryClient();
}
// Browser: use singleton pattern to keep the same query client
return (clientQueryClientSingleton ??= createQueryClient());
};

export const api = createTRPCReact<AppRouter>();

export function TRPCReactProvider(props: { children: React.ReactNode }) {
const queryClient = getQueryClient();

const [trpcClient] = useState(() =>
api.createClient({
links: [
loggerLink({
enabled: (op) =>
process.env.NODE_ENV === "development" ||
(op.direction === "down" && op.result instanceof Error),
}),
httpLink({
transformer: SuperJSON,
url: getBaseUrl() + "/api/trpc",
headers: () => {
const headers = new Headers();
headers.set("x-trpc-source", "nextjs-react");
return headers;
},
}),
],
}),
);

return (
<QueryClientProvider client={queryClient}>
<api.Provider client={trpcClient} queryClient={queryClient}>
{props.children}
</api.Provider>
</QueryClientProvider>
);
}

function getBaseUrl() {
if (typeof window !== "undefined") return window.location.origin;
// if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
return `http://localhost:${process.env.PORT ?? 3000}`;
}
and this is root.ts
import { initTRPC } from "@trpc/server";
import superjson from "superjson";
import { ZodError } from "zod";

import { db } from "@/server/db";
import { getServerSession } from "@/lib/server-session";

export const createTRPCContext = async (opts: { headers: Headers }) => {
const session = await getServerSession();
return {
session,
db,
...opts,
};
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
};
},
});
export const createCallerFactory = t.createCallerFactory;

export const createTRPCRouter = t.router;

export const procedure = t.procedure;
import { initTRPC } from "@trpc/server";
import superjson from "superjson";
import { ZodError } from "zod";

import { db } from "@/server/db";
import { getServerSession } from "@/lib/server-session";

export const createTRPCContext = async (opts: { headers: Headers }) => {
const session = await getServerSession();
return {
session,
db,
...opts,
};
};

const t = initTRPC.context<typeof createTRPCContext>().create({
transformer: superjson,
errorFormatter({ shape, error }) {
return {
...shape,
data: {
...shape.data,
zodError:
error.cause instanceof ZodError ? error.cause.flatten() : null,
},
};
},
});
export const createCallerFactory = t.createCallerFactory;

export const createTRPCRouter = t.router;

export const procedure = t.procedure;
All other files are as it is that comes from create t3 app Please help
AK
Alex / KATT 🐱19d ago
are you using bun? bump your trpc deps and it should work
M
MadMax19d ago
It works now thanks for working on this...
More Posts
type safety with metahow do I get the meta types to work correctly?Confused by the many examples and docs of implementing trpc, next.js (app router), and clerk.To show an examples of the many variants an implementations here is an example: In TRPC Docs: httpTypeError: cache is not a functionTrying to run vitest integration testing on a procedure but i keep running into errors with a "cacheCan't throw errorMy request is pending although throw new TRPCError() executed. Something wrong here?How to use `getQueryKey` from the server side?Hi guys, i cannot figure out how to use `getQueryKey` from the server side. Is this possible? The ukeep previous dataTrpc 11 (trpc@next) doesn’t have support for keepPreviousData? I’m trying to useQuery with keepPreviContext with trpc ws clientHello! I've implemented trpc to my nextjs 14 app router project, along with trpc socket subscriptionCannot use usemutation in my nextjs/t3 projectI have this code ` const mutation = api.auth.addaccount.useMutation(); const handleLogin = async Has anyone passed supabase user to the tRPC context in Expo?I am trying to pass the logged in user to the context of tRPC. To be able to use it in the routers aCould we PLEASE get more docs on subscriptions / observables?They sem to me extremely useful and important and there is just about no documentation on them at alAdding trpc.useQuery hook to Next.js page with react-hook-form prevents stateful refresh.Hi, I'm new to tRPC so apologies if I've worded this poorly. I've got a page with a form managed by React-query options not available in trpc/react-query?I'm not sure if I'm misunderstanding something, but i'm trying to use the `keepPreviousData` option Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]Good Morning I am getting the above error when updating to the latest version of NextJS - 14.1.1 thrCan I create custom terminating links?There are cases where a user of my application is offline and can't have access to the server. I'd lI want to use tRPC but I don't want a serverCan I have tRPC exclusively run on the client? I don't want to have any servers. The architecture a“Integrating Drizzle Prepared Statements with tRPC Context”I’m currently using tRPC and Drizzle for my project. In tRPC, we generally place the database driver