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 through 14.1.4. The last release that doesn't cause this error is 14.1.0. I have: * ensured versions are the same on server and client. * updated packages * removed all node_modules and reinstalled. * pnpm store prune, * deleted pnpm.lock and reinstalled. * deleted .next folder * latest v18 and v20 of Node.js It makes no sense at all. Its tRPC which is erroring but only when I upgrade NextJS past 14.1. I can see that the tRPC request within the middleware runs as expected but its when trying to render a RSC component with a server side tRPC call in it is when I get the error. full error:
../../node_modules/.pnpm/@trpc+client@10.45.2_@trpc+server@10.45.2/node_modules/@trpc/client/dist/index.mjs (160:0) @ eval
apps/web dev: ⨯ TypeError: client[procedureType] is not a function
apps/web dev: at eval (./src/lib/utils/trpc/server.ts:73:91)
apps/web dev: at (rsc)/./src/lib/utils/trpc/server.ts (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:453:1)
apps/web dev: at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev: at eval (movies/movies.tsx:11:84)
apps/web dev: at (rsc)/./src/app/(main)/(browse)/movies/movies.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:368:1)
apps/web dev: at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev: at eval (movies/page.tsx:9:65)
apps/web dev: at (rsc)/./src/app/(main)/(browse)/movies/page.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:379:1)
../../node_modules/.pnpm/@trpc+client@10.45.2_@trpc+server@10.45.2/node_modules/@trpc/client/dist/index.mjs (160:0) @ eval
apps/web dev: ⨯ TypeError: client[procedureType] is not a function
apps/web dev: at eval (./src/lib/utils/trpc/server.ts:73:91)
apps/web dev: at (rsc)/./src/lib/utils/trpc/server.ts (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:453:1)
apps/web dev: at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev: at eval (movies/movies.tsx:11:84)
apps/web dev: at (rsc)/./src/app/(main)/(browse)/movies/movies.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:368:1)
apps/web dev: at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev: at eval (movies/page.tsx:9:65)
apps/web dev: at (rsc)/./src/app/(main)/(browse)/movies/page.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:379:1)
Solution:
I solved it. This was due to having use server at the top of my server.ts file for interacting with tRPC on the server side. I replaced it with import server-only to discover this issue I followed the error to the code within node_modules node_modules/.pnpm/@trpc+client@11.0.0-next.320_@trpc+server@11.0.0-next.320/node_modules/@trpc/client/dist/createTRPCClient.mjs...
B
BillyBob28d ago
Here is my server link:
export const api = createTRPCProxyClient<AppRouter>({
transformer: superjson,
links: [
loggerLink({
enabled: (op) =>
env.ENV === 'development' ||
(op.direction === 'down' && op.result instanceof Error),
}),
httpBatchLink({
url: 'http://localhost:4000/trpc',
headers() {
return {
cookie: cookies().toString(),
'x-trpc-source': 'rsc',
}
},
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
}),
],
})
export const api = createTRPCProxyClient<AppRouter>({
transformer: superjson,
links: [
loggerLink({
enabled: (op) =>
env.ENV === 'development' ||
(op.direction === 'down' && op.result instanceof Error),
}),
httpBatchLink({
url: 'http://localhost:4000/trpc',
headers() {
return {
cookie: cookies().toString(),
'x-trpc-source': 'rsc',
}
},
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
}),
],
})
B
BillyBob28d ago
GitHub
GitHub - lwears/ReelScore: Movies and TV Ratings
Movies and TV Ratings. Contribute to lwears/ReelScore development by creating an account on GitHub.
B
BillyBob26d ago
No description
Solution
B
BillyBob26d ago
I solved it. This was due to having use server at the top of my server.ts file for interacting with tRPC on the server side. I replaced it with import server-only to discover this issue I followed the error to the code within node_modules node_modules/.pnpm/@trpc+client@11.0.0-next.320_@trpc+server@11.0.0-next.320/node_modules/@trpc/client/dist/createTRPCClient.mjs added some debugging like so:
*/ function createTRPCClientProxy(client) {
return createFlatProxy((key)=>{
if (client.hasOwnProperty(key)) {
return client[key];
}
if (key === '__untypedClient') {
return client;
}
return createRecursiveProxy(({ path , args })=>{
const pathCopy = [
key,
...path
];
const procedureType = clientCallTypeToProcedureType(pathCopy.pop());
const fullPath = pathCopy.join('.');
console.log({client})
console.log({procedureType})
console.log({fullPath})
console.log({pathCopy: pathCopy.pop()})
if (!client[procedureType]) {
return;
}
return client[procedureType](fullPath, ...args);
});
});
}
*/ function createTRPCClientProxy(client) {
return createFlatProxy((key)=>{
if (client.hasOwnProperty(key)) {
return client[key];
}
if (key === '__untypedClient') {
return client;
}
return createRecursiveProxy(({ path , args })=>{
const pathCopy = [
key,
...path
];
const procedureType = clientCallTypeToProcedureType(pathCopy.pop());
const fullPath = pathCopy.join('.');
console.log({client})
console.log({procedureType})
console.log({fullPath})
console.log({pathCopy: pathCopy.pop()})
if (!client[procedureType]) {
return;
}
return client[procedureType](fullPath, ...args);
});
});
}
From here I got a new error. Which was saying the server.ts tRPC connecter was exporting a non-async function, which you cannot do if marking the file at the top with use server I removed the use server from the top, replaced with use server-only removed the debugging lines added as shown above and it worked.
More Posts
Can 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 driverI have an actual data returned, but I get 404 spammed in the consoleIt's a bit weird, I have the data returned but I also get 404 at the same time. Here is usage on thNo "query"-procedure on path "auth.getProfile"I am getting bunch of these errors and I can't figure this one out yet. I saw bunch of issues createType '[]' has no properties in common with type 'MutateOptions<{ id: string....Is it possible to get this to work? i am trying to make a single action that works across 2 routers.Strange error when testing with Auth.js v5Hi there, I just created a fresh Next.js project and added `next-auth` version 5 beta for authentictRPC failed on beehiiv.fetchBeehiivPosts: Invalid state: Controller is already closedIs there any solution to this error. I am getting while I try to hard refresh a page where I am callIs there a way to configure a trpc router to require an output() schema to be specified?I would like to require the output() schema to be specified on all the queries and mutations in my pErrors not caught in proceduresI have an application that uses Solid Start `@solidjs/start`. Most Solid Start apps use the `fetchResilent failure on client query?Hey friends, long time listener, first time caller 😉 I have encountered a quite confusing quirk thaAuth0 + fastify + tRPCHi, I've inherited a tRPC React/fastify app and need to migrate the auth from supertokens to auth0.Getting the type of contextIs it possible to get the type on a context object that is passed into a specific TRPC procedure aftIs it possible to perform attribute-based authorization after the .query?I have a TRPC method, `getStudentGradeById,` that accepts the `gradeId`. I want to return the grade