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 useQueryuseQuery : Property 'useQuery' does not exist on type 'never'.ts(2339)Property 'useQuery' does not exist on type 'never'.ts(2339) on this line const q = trpc.hello.useQuery("thing");const q = trpc.hello.useQuery("thing"); in my component.

2/ In the AppRouterAppRouter 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.34011.0.0-rc.340

Typescript type error with latest version

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.34011.0.0-rc.340

Typescript type error with latest version

Typescript type error with latest version

Continue the conversation

tRPC

Continue the conversation

tRPC

Similar Threads