mh15•12mo 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

8 Replies

mh15OP•12mo ago

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

Nick•12mo ago

What does your router look like?

mh15OP•12mo ago

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

mh15OP•12mo ago

Solution

mh15•12mo ago

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

Nick•12mo ago

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

mh15OP•12mo ago

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

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