BillyBob
BillyBob7mo 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
BillyBob7mo 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
BillyBob7mo 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
BillyBob7mo ago
No description
Solution
BillyBob
BillyBob7mo 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.