trpc v11 error: The transformer property has moved to httpLink/httpBatchLink/wsLink

[FleetAdmiralJakob]

Just upgraded tRPC to v11 and I directly got this error: Type typeof SuperJSON is not assignable to type
TypeError<"The transformer property has moved to httpLink/httpBatchLink/wsLink">
Type typeof SuperJSON is not assignable to type
"The transformer property has moved to httpLink/httpBatchLink/wsLink"

My client initialization of tRPC:

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import type { AppRouter } from "@weatherio/api";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data deserialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

[erinnovations]

You have to move the transformer to the params of httpBatchLink and remove it from the config root.

[andrewmartin]

I am having this issue too, trying to migrate to 11.

@erinnovations Hmm. I tried that, and am hitting the same error ^

I copy pasted code directly from the docs. Any idea?

[andrewmartin]

For posterity, here's the type error:

Argument of type '{ config(opts: { ctx?: NextPageContext | undefined; }): { links: TRPCLink<BuiltRouter<{ ctx: { headers: Headers; db: PrismaClient<{ log: LogLevel[]; }, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>[]; }; ssr: true; }' is not assignable to parameter of type 'WithTRPCNoSSROptions<BuiltRouter<{ ctx: { headers: Headers; db: PrismaClient<{ log: LogLevel[]; }, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>> | WithTRPCSSROptions<...>'.
  Type '{ config(opts: { ctx?: NextPageContext | undefined; }): { links: TRPCLink<BuiltRouter<{ ctx: { headers: Headers; db: PrismaClient<{ log: LogLevel[]; }, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>[]; }; ssr: true; }' is not assignable to type 'WithTRPCSSROptions<BuiltRouter<{ ctx: { headers: Headers; db: PrismaClient<{ log: LogLevel[]; }, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>'.
    Property 'transformer' is missing in type '{ config(opts: { ctx?: NextPageContext | undefined; }): { links: TRPCLink<BuiltRouter<{ ctx: { headers: Headers; db: PrismaClient<{ log: LogLevel[]; }, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>[]; }; ssr: true; }' but required in type 'TransformerOptionYes'.
    ```

[andrewmartin]

And versions:

    "@tanstack/react-query": "^5.29.2",
    "@tanstack/react-query-devtools": "^5.29.2",
    "@trpc/client": "^11.0.0-rc.340",
    "@trpc/next": "^11.0.0-rc.340",
    "@trpc/react-query": "^11.0.0-rc.340",
    "@trpc/server": "^11.0.0-rc.340",
    ```

[FleetAdmiralJakob]

@andrewmartin just do what @erinnovations told you. Remove the transformer from what gets returned and put it at the bottom as a function argument

[andrewmartin]

Not sure what it was, but FWIW, I think for anyone else reading, I got it working on my stack when moving from 10 to 11. What I did was just comb through some (light) diffing in the https://github.com/t3-oss/create-t3-app starter app. Saved me a ton of time. Love this stack, but the docs are always changing because they're moving so fast!

[someshkhandelia]

This thread helped me in fixing some errors like the transformer issue. But I still get the error as can be seen in the config of the above screenshot. I am trying to migrate from PagesRouter to AppRouter. I am also using the create-t3-app. Can someone please help? @andrewmartin @erinnovations @FleetAdmiralJakob.

The error is as follows:

Type '() => { transformer: boolean; links: TRPCLink<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>[]; }' is not assignable to type '(info: { ctx?: NextPageContext | undefined; }) => WithTRPCConfig<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterO...'.
  Type '{ transformer: boolean; links: TRPCLink<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>[]; }' is not assignable to type 'WithTRPCConfig<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>'.
    Type '{ transformer: boolean; links: TRPCLink<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>[]; }' is not assignable to type 'CreateTRPCClientOptions<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>> & { ...; } & { ...; }'.
      Type '{ transformer: boolean; links: TRPCLink<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>[]; }' is not assignable to type 'CreateTRPCClientOptions<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>>'.
        Types of property 'transformer' are incompatible.
          Type 'boolean' is not assignable to type 'TypeError<"The transformer property has moved to httpLink/httpBatchLink/wsLink">'.ts(2322)
withTRPC.d.ts(16, 5): The expected type comes from property 'config' which is declared here on type 'WithTRPCNoSSROptions<BuiltRouter<{ ctx: { req: NextRequest; res: NextResponse<unknown>; db: PrismaClient<{ log: ("query" | "warn" | "error")[]; }, never, DefaultArgs>; user: { ...; } | null; }; meta: object; errorShape: { ...; }; transformer: true; }, DecorateCreateRouterOptions<...>>> | WithTRPCSSROptions<...>'

[FleetAdmiralJakob]

Remove the transformer from what gets returned and put it at the bottom as a function argument

[someshkhandelia]

The error seems to be gone. Thanks @FleetAdmiralJakob !