Next.js Discord

Discord Forum

Server Error: client[procedureType] is not a function [ tRPC v10.45.2 / 11 ] [ NextJS v14.1.X ]

Answered
Basset Artésien Normand posted this in #help-forum
Open in Discord
Basset Artésien NormandOP
Good Morning I am getting the above error when updating to the latest version of NextJS. The last release that doesn't cause this error is v14.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

I am having trouble figuring out where the issue is coming from.

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)
Answered by Basset Artésien Normand
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.
View full answer

3 Replies

Basset Artésien NormandOP
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',
        })
      },
    }),
  ],
})
Basset Artésien NormandOP
Basset Artésien NormandOP
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.
Answer