BillyBob•9mo 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

BillyBobOP•9mo 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',
        })
      },
    }),
  ],
})

BillyBobOP•9mo ago

link to repo: https://github.com/lwears/ReelScore

GitHub

GitHub - lwears/ReelScore: Movies and TV Ratings

Movies and TV Ratings. Contribute to lwears/ReelScore development by creating an account on GitHub.

BillyBobOP•9mo ago

Solution

BillyBob•9mo ago

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.