mh15•16mo 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.

Solution:

I was reexporting my type signatures in a barrel file. Importing directly fixed the issue.

Jump to solution

14 Replies

mh15OP•16mo ago

Also, my google-fu is failing me for this type error. Github repo doesn't seem to contain the source either.

Nick•16mo ago

What does your router look like?

mh15OP•16mo ago

index.ts on the left and trpc.ts on the right

mh15OP•16mo ago

Solution

mh15•16mo ago

I was reexporting my type signatures in a barrel file. Importing directly fixed the issue.

Nick•16mo ago

Hm that’s interesting, maybe a tsconfig related thing?

mh15OP•16mo ago

Yeah probably. I’m integrating trpc into an existing monorepo so have all kinds of mess going on with the paths

Chen•15mo 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.

ToP•2mo ago

I have exactly same issue. I tried to narrow it down, by reverting to most basic setup of trpc from Quickstart. Only difference is that I am using turborepo. At first I didnt even had types (everything was any), when i imported from trpc package from turborepo to client app. But then i used Subpath imports and now vscode shows correct types. But then, when i create tRPC client it has this string type instead of something useful: "The property 'query' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'mutation' in your router collides with a built-in method, rename this router or procedure on your backend." | ... 5 more ... | "The property 'runtime' in your router collides with a built-in method, rename this router or procedure on your backend." Only thing that helped was moving server to same package as the app. Effectively canceling monorepo 😀 I think that problem is that in turborepo, I cant really import AppRouter type with relative path, because it is import between turborepo packages, and they do some magic with paths which breaks trpc types probably :/ It is only type/intellisense issue, everything else works. But I would say that typesafety and intellisense is kinda main reason why people love tRPC. I dont expect that anybody would be able to help me with this, but if somebody could maybe explain what this error means and why it can occur, that would help me greatly

backbone•2mo ago

any git repo ?

ToP•4w ago

Not yet. I will prep demo and if we manage to fix this, we can maybe even use it in examples as turborepo with trpc standalone and sveltekit I have solution. In my case, it was caused by defining type of router, instead of letting it be infered. So instead of: const router: ReturnType<typeof router> = router({...}) I did this: const router = router({...}) The reason why I added type to router in first place was because, it was giving me this error The inferred type of 'router' references an inaccessible 'this' type. A type annotation is necessary. But that was caused by tsconfig.json I needed to remove "declaration": true Now everything works perfectly

Nick•4w ago

Great, yeah the first one wouldn't work because router() on its own would essentially return {}, you have to actually call it with your routes and then it gets typed via inference There are probably 30 different ways to set up a valid tsconfig and a few settings that can muck up any working config too 😄

ToP•4w ago

Yeah. Maybe it might be good idea to have working example of tsconfig in docs? And maybe even collection of keys you cant use in your tsconfig? It might help some people in future.

Nick•4w ago

We have loads of example projects, but thing is every repo is different

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

Did you find this page helpful?