bug: AnyTRPCRouter immediately collides
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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