trpc / trpc/trpc

bug: AnyTRPCRouter immediately collides

Open
#6,721 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🐛 bug
Dominant language
TypeScript
Stars
40.6k
Forks
1.7k
Avg merge
1d 22h
Merged PRs (30d)
22

Description

Provide environment information
System:
    OS: macOS 14.7.4
    CPU: (14) arm64 Apple M3 Max
    Memory: 808.66 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.1 - ~/.nvm/versions/node/v22.13.1/bin/node
    Yarn: 1.22.22 - ~/Library/pnpm/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.1/bin/npm
    pnpm: 9.15.5 - ~/.nvm/versions/node/v22.13.1/bin/pnpm
    bun: 1.2.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 135.0.7049.96
    Safari: 18.4
  npmPackages:
    @tanstack/react-query: ^5.74.4 => 5.74.4 
    @trpc/client: catalog: => 11.1.0 
    @trpc/react-query: catalog: => 11.1.0 
    @trpc/server: catalog: => 11.1.0 
    react: 18.2.0 => 18.2.0 
    typescript: ^5.8.3 => 5.8.3
Describe the bug

The following code:

import { createTRPCReact } from "@trpc/react-query";
import type { AnyTRPCRouter } from "@trpc/server";

export const trpc = createTRPCReact<AnyTRPCRouter>();

Leads to the trpc variable not having a proper type. It doesn't seem like this should be the case for a built in type meant to represent any type of router.

const trpc: "The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'useUtils' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'Provider' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'createClient' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'useQueries' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'useSuspenseQueries' in your router collides with a built-in method, rename this router or procedure on your backend."
Link to reproduction

https://stackblitz.com/edit/github-6ltxttds?file=src%2Futils%2Ftrpc.ts

To reproduce

Open the linked reproduction and hover your mouse over the trpc variable.

Additional information

No response

👨‍👧‍👦 Contributing
  • 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open the linked StackBlitz reproduction and inspect src/utils/trpc.ts, starting with the createTRPCReact() type. Confirm the reported collision union and determine where the built-in methods are typed; done means the trpc variable receives a usable type for AnyTRPCRouter without those collision errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
api, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
43/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.