trpc: DX: using `client` as the route name causes an error

Provide environment information

System:
    OS: macOS 13.1
    CPU: (8) x64 Apple M1
    Memory: 18.31 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
    Watchman: 2022.10.03.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 109.1.47.171
    Chrome: 109.0.5414.119
    Safari: 16.2
  npmPackages:
    @tanstack/react-query: ^4.20.4 => 4.24.4 
    @trpc/client: ^10.7.0 => 10.9.1 
    @trpc/next: ^10.7.0 => 10.9.1 
    @trpc/react-query: ^10.7.0 => 10.9.1 
    @trpc/server: ^10.7.0 => 10.9.1 
    next: ^13.1.1 => 13.1.6 
    react: ^18.2.0 => 18.2.0 
    typescript: ^4.9.4 => 4.9.5

Describe the bug

I’ve created a route and named it client but I get this error when trying to use trpc.useContext()

client collides with a built-in method, you should rename this router or procedure on your backend

I could fix the issue by renaming it to clientRoute and the problem was solved

Link to reproduction

https://stackblitz.com/github/trpc/examples-next-minimal-starter

To reproduce

Create a route and name it client, This should trigger an error as shown in the video below:

https://user-images.githubusercontent.com/56588770/216343859-4bd76863-845e-45bd-a664-0911b4ed0054.mov

Additional information

No response

👨‍👧‍👦 Contributing

🙋‍♂️ Yes, I’d be down to file a PR fixing this bug!

_TRP-54

Funding

You can sponsor this specific effort via a Polar.sh pledge below
We receive the pledge once the issue is completed & verified

<picture> <source media="(prefers-color-scheme: dark)" srcset="https://polar.sh/api/github/trpc/trpc/issues/3710/pledge.svg?darkmode=1"> Fund with Polar

</picture>

About this issue

Original URL
State: open
Created a year ago
Reactions: 3
Comments: 17 (4 by maintainers)

Most upvoted comments

I’m also getting this error randomly on my build server:

app:build: Failed to compile.
--
app:build:
app:build: ./src/pages/_app.tsx:87:21
app:build: Type error: Property 'withTRPC' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend." \| "The property 'withTRPC' 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-i...'.
app:build:   Property 'withTRPC' does not exist on type '"The property 'useContext' in your router collides with a built-in method, rename this router or procedure on your backend."'.
app:build:
app:build:   86 \|
app:build: > 87 \| export default trpc.withTRPC(App);
app:build:      \|                     ^
app:build:   88 \|
app:build:  ELIFECYCLE  Command failed with exit code 1.
app:build: ERROR: command finished with error: command (/vercel/path0/packages/app) pnpm run build exited (1)
command (/vercel/path0/packages/app) pnpm run build exited (1)
 
Tasks:    1 successful, 2 total
Cached:    1 cached, 2 total
Time:    19.473s
Summary:    /vercel/path0/.turbo/runs/2OL0f9u0IvChFcvtJWdcgOBVjIw.json
 
ERROR  run failed: command  exited (1)
ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm build:app" exited with 1
Deployment completed
BUILD_UTILS_SPAWN_1: Command "pnpm build:app" exited with 1

asterikx on Apr 13, 2023

Does anyone have a reproduction where this error should not be showing up (you do not have actually have a procedure named something that collides with a built-in method)?

sachinraja on Aug 27, 2023

Rename it to something else.

Hey, what exactly should I rename? I fixed the error with updating tRPC

FleetAdmiralJakob on Aug 6, 2023

I think this happened after upgrading as a result of #3693.

I think it’s worth investigating a bit more if there are non-breaking workarounds we can do to prevent this as I think it’s really bad DX

KATT on Feb 2, 2023