Elven•8mo ago

Typescript type error with latest version

I'm initialising a project with trpc v11 and I'm trying to strictly follow the documentation for react-query. I face a problem: everything works fine at runtime but in vscode I have 2 typescript errors: 1/ My hello procedure get this type error on useQuery : Property 'useQuery' does not exist on type 'never'.ts(2339) on this line const q = trpc.hello.useQuery("thing"); in my component. 2/ In the AppRouter in the frontend on this line:

export const trpc = createTRPCReact<AppRouter>();

export const trpc = createTRPCReact<AppRouter>();

Truncated error (full: https://pastebin.com/ZDD5nsy3):

Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { hello: BuildProcedure<...>; }>' does not satisfy the constraint 'Router<any, any>'.
  The types of '_def._config.errorFormatter' are incompatible between these types.
    Type 'ErrorFormatter<object, TRPCErrorShape<number, Record<string, unknown>> & { [key: string]: any; }>' is not assignable to type 'ErrorFormatter<any, any>'.
        Type '{ error: TRPCError; type: "query" | "mutation" | "subscription" | "unknown"; path: string | undefined; input: unknown; ctx: any; shape: DefaultErrorShape; }' is not assignable to type '{ error: TRPCError; type: "query" | "mutation" | "subscription" | "unknown"; path: string | undefined; input: unknown; ctx: object | undefined; shape: DefaultErrorShape; }'.
          The types of 'error.code' are incompatible between these types.
            Type '"INTERNAL_SERVER_ERROR" | ... few more ... | "UNSUPPORTED_MEDIA_TYPE"' is not assignable to type '"INTERNAL_SERVER_ERROR" | "PARSE_ERROR" | ... few more ... | "CLIENT_CLOSED_REQUEST"'.
              Type '"UNSUPPORTED_MEDIA_TYPE"' is not assignable to type '"INTERNAL_SERVER_ERROR" | "PARSE_ERROR" | ... few more ... | "CLIENT_CLOSED_REQUEST"'.ts(2344)

Type 'CreateRouterInner<RootConfig<{ ctx: object; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { hello: BuildProcedure<...>; }>' does not satisfy the constraint 'Router<any, any>'.
  The types of '_def._config.errorFormatter' are incompatible between these types.
    Type 'ErrorFormatter<object, TRPCErrorShape<number, Record<string, unknown>> & { [key: string]: any; }>' is not assignable to type 'ErrorFormatter<any, any>'.
        Type '{ error: TRPCError; type: "query" | "mutation" | "subscription" | "unknown"; path: string | undefined; input: unknown; ctx: any; shape: DefaultErrorShape; }' is not assignable to type '{ error: TRPCError; type: "query" | "mutation" | "subscription" | "unknown"; path: string | undefined; input: unknown; ctx: object | undefined; shape: DefaultErrorShape; }'.
          The types of 'error.code' are incompatible between these types.
            Type '"INTERNAL_SERVER_ERROR" | ... few more ... | "UNSUPPORTED_MEDIA_TYPE"' is not assignable to type '"INTERNAL_SERVER_ERROR" | "PARSE_ERROR" | ... few more ... | "CLIENT_CLOSED_REQUEST"'.
              Type '"UNSUPPORTED_MEDIA_TYPE"' is not assignable to type '"INTERNAL_SERVER_ERROR" | "PARSE_ERROR" | ... few more ... | "CLIENT_CLOSED_REQUEST"'.ts(2344)

Context: I'm using react + vite + react query + bun. package.json of frontend & backend are matching to 11.0.0-rc.340

1 Reply

ElvenOP•8mo ago

For added context my router:

const t = initTRPC.create();

const publicProcedure = t.procedure;
const router = t.router;

export const appRouter = router({
  hello: publicProcedure.input(z.string().nullish()).query(({ input }) => {
    return `Hello ${input ?? "World!"}!`;
  }),
});

export type AppRouter = typeof appRouter;

const t = initTRPC.create();

const publicProcedure = t.procedure;
const router = t.router;

export const appRouter = router({
  hello: publicProcedure.input(z.string().nullish()).query(({ input }) => {
    return `Hello ${input ?? "World!"}!`;
  }),
});

export type AppRouter = typeof appRouter;

The issue is fixed. I'm not entirely sure why, after removing node_modules dir and reinstalling everything and restarting vscode types were ok