tRPCttRPC
Powered by
BillyBobB
tRPC•2y ago•
6 replies
BillyBob

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
pnpm store prune
,
* deleted 
pnpm.lock
pnpm.lock
 and reinstalled.
* deleted 
.next
.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
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
import server-only

to discover this issue I followed the error to the code within 
node_modules
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
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
server.ts
 tRPC connecter was exporting a non-async function, which you cannot do if marking the file at the top with 
use server
use server
I removed the 
use server
use server
 from the top, replaced with 
use server-only
use server-only
 removed the debugging lines added as shown above and it worked.
Jump to solution
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

"client[procedureType] is not a function" after upgrading NextJS to version 14.1.2+ ( tRPC v10)
Answer OverflowAAnswer Overflow / ❓-help
2y ago
TypeError: client[procedureType] is not a function
emilEemil / ❓-help
3y ago
Upgrading tRPC v10 to v11 in NextJS 15.0.1
AdicssAAdicss / ❓-help
12mo ago
TRPC v10 to v11 - change logs location
Mr.defaultMMr.default / ❓-help
3y ago