BillyBob
BillyBob4mo ago

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...
Jump to solution
4 Replies
BillyBob
BillyBob4mo 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',
})
},
}),
],
})
BillyBob
BillyBob4mo ago
GitHub
GitHub - lwears/ReelScore: Movies and TV Ratings
Movies and TV Ratings. Contribute to lwears/ReelScore development by creating an account on GitHub.
BillyBob
BillyBob4mo ago
No description
Solution
BillyBob
BillyBob4mo 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 `fetchRe