Elven
Elven3mo 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
Elven
Elven3mo 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