mh15
mh157mo ago

`The property 'query' in your router collides with a built-in method`

I'm seeing an error (attached) where I can get autocompletes on TRPC in the file where the client is defined, but not anywhere I import it in.
// client.ts
import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";

import type { AppRouter } from "wherever";

export const trpcClient = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: `whatever`,
// You can pass any HTTP headers you wish here
async headers() {
return {
authorization: "whatever",
};
},
}),
],
});
// client.ts
import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";

import type { AppRouter } from "wherever";

export const trpcClient = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: `whatever`,
// You can pass any HTTP headers you wish here
async headers() {
return {
authorization: "whatever",
};
},
}),
],
});
It does call the backend but the type checking isn't working.
No description
Solution:
I was reexporting my type signatures in a barrel file. Importing directly fixed the issue.
Jump to solution
8 Replies
mh15
mh157mo ago
Also, my google-fu is failing me for this type error. Github repo doesn't seem to contain the source either.
Nick
Nick7mo ago
What does your router look like?
mh15
mh157mo ago
index.ts on the left and trpc.ts on the right
mh15
mh157mo ago
No description
Solution
mh15
mh157mo ago
I was reexporting my type signatures in a barrel file. Importing directly fixed the issue.
Nick
Nick7mo ago
Hm that’s interesting, maybe a tsconfig related thing?
mh15
mh157mo ago
Yeah probably. I’m integrating trpc into an existing monorepo so have all kinds of mess going on with the paths
Chen
Chen5mo ago
To clarify this if anyone is looking in the future, I have the following server/src/utils/trpc.ts:
import { initTRPC } from "@trpc/server";
export const t = initTRPC.create()`
import { initTRPC } from "@trpc/server";
export const t = initTRPC.create()`
And in server/src/app.ts...
import { t } from "~/utils/trpc" // this causes the error
import { t } from "./utils/trpc" // this has resolved it
import { t } from "~/utils/trpc" // this causes the error
import { t } from "./utils/trpc" // this has resolved it
My tsconfig looks like this:
// ...
"paths": {
"~/*": ["./src/*"]
}
// ...
"paths": {
"~/*": ["./src/*"]
}
Does seem to be tsconfig themed for sure. I have a pretty basic set up, no craziness happening with paths besides what I sent above.