BillyBobB
tRPC•2y ago
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
    ,
  • 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)
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

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);
        });
    });
}


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.
Jump to solution
Was this page helpful?