tRPC errorFormatter not inferring types to the frontend

[ishanjarwal]

My project is in 2 parts

1. The Backend : Fastify + trpc/server
2. The Frontend : NextJS.

This isn't a monorepo project, rather exists in 2 separate repos

On the backend, I generate the trpc AppRouter types by building the project. I get an index.d.ts file which I copy and paste to the frontend (This is a temporary workaround later I will make this an npm package to share between the 2 repos)

The problem : I am using errorFormatter to send only required fields when error is thrown on the backend but on the frontend, it is not being inferred correctly and I get this error :
TRPCClientError: Unable to transform response from server
The generated types file (index.d.ts) has the error shape as the DefaultErrorShape not the custom error shape enforced by the errorFormatter.

Here is my errorFormatter

errorFormatter({ shape, error }) {
   if (error.cause instanceof ZodError) {
     return {
       ...shape,
       code: undefined,
       message: "Incorrect input format",
       data: {
         ...shape.data,
         path: undefined,
         stack: undefined,
         validationErrors: error.cause.issues.map((e) => ({
           path: e.path.join("."),
           message: e.message,
         })),
       },
     };
   }

   return {
     ...shape,
     code: undefined,
     data: {
       ...shape.data,
       stack: undefined,
       meta:
         typeof error.cause === "object" && error.cause !== null
           ? error.cause
           : undefined,
     },
   };
 },

I am also using superjson as the transformer on both server and the client (this might not be the cause of this

[manimovassagh]

The core problem here is that you're setting code: undefined in your error formatter return, which strips the code field from the JSON response. tRPC's client-side deserialization (especially with superjson) expects certain fields to exist in the error shape, and when they're missing, it throws Unable to transform response from server.

The code field (TRPC_ERROR_CODE_NUMBER) is a required part of tRPC's error envelope — removing it breaks the client's ability to parse the response.

Fix: don't set code: undefined. Instead, only add/modify the fields you want:

errorFormatter({ shape, error }) {
  if (error.cause instanceof ZodError) {
    return {
      ...shape,
      message: "Incorrect input format",
      data: {
        ...shape.data,
        stack: undefined, // this is fine to remove
        validationErrors: error.cause.issues.map((e) => ({
          path: e.path.join("."),
          message: e.message,
        })),
      },
    };
  }

  return {
    ...shape,
    data: {
      ...shape.data,
      stack: undefined,
      meta:
        typeof error.cause === "object" && error.cause !== null
          ? error.cause
          : undefined,
    },
  };
}

Notice I removed the code: undefined and path: undefined lines. The code and path are structurally required by tRPC's error shape.

Regarding the type inference issue with your separate repos: when you build and copy the index.d.ts, the error formatter's return type needs to be fully resolved in that declaration file. The reason you're seeing DefaultErrorShape instead of your custom shape is likely because TypeScript can't infer the exact return type of the error formatter when generating declarations — it falls back to the default.

To fix the type inference across repos:

1. Explicitly type your error formatter return, or
2. Export the AppRouter type directly rather than relying on the generated .d.ts — even across repos, you can create a shared types package that both repos depend on
3. Or better yet, use a monorepo tool like turborepo/nx where the types are shared via internal packages without any copy-paste

The copy-paste .d.ts approach is inherently fragile for complex inferred types like tRPC routers.