bug: Procedure not found when using nextjs basePath config

[Asher-JH]

Provide environment information

    OS: macOS 13.5.2
    CPU: (8) arm64 Apple M2
    Memory: 163.22 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.6.1 - ~/.nvm/versions/node/v20.6.1/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v20.6.1/bin/npm
    pnpm: 8.15.4 - ~/.nvm/versions/node/v20.6.1/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.90
    Safari: 16.6
  npmPackages:
    @tanstack/react-query: ^5.54.1 => 5.56.2 
    @trpc/client: 11.0.0-rc.553 => 11.0.0-rc.553+9b629cc67 
    @trpc/react-query: 11.0.0-rc.553 => 11.0.0-rc.553+9b629cc67 
    @trpc/server: 11.0.0-rc.553 => 11.0.0-rc.553+9b629cc67 
    next: ^14.2.4 => 14.2.5 
    react: ^18.3.1 => 18.3.1 
    typescript: ^5.5.3 => 5.5.4 

Describe the bug

In the current nextJS project, basePath config is being set. And the issue only appears when basePath is set.

The basePath config is being set to = '/dashboard'

When using a useQuery hook, it will error out with: No procedure found on path "ovider.profile.getPayoutProviderOnboardingLink"'

The procedure in question is correctly located @ serviceProvider.profile.getPayoutProviderOnboardingLink

Weird thing is that, if I have two useQuery hooks on the same page, only the first one will have the error, the remaining queries work as expected, this is likely due to using the HTTPBatchLink.

One thing to note is that, from the error, exactly 9 characters are missing in the start, which is the same number of characters my basePath config is set to. I tested with different number of characters for the basePath and the error always states they are short that same amount.

I have updated my trpc helpers to use the correct basePath when calling trpc apis as well, and can confirm it does work without basePath set.

Link to reproduction

To reproduce

1. Init NextJS app
2. use basePath in next.config.json 3a. Use 2 useQuery hooks on the same page, first one will fail while second succeeds 3b. Use 1 useQuery hooks should also fail

Additional information

No response

👨‍👧‍👦 Contributing

• [ ] 🙋‍♂️ Yes, I'd be down to file a PR fixing this bug!

Funding

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

[Asher-JH]

I'll try and setup a reproduction in the meantime

[mrcwinn]

I'm able to reproduce this exactly. What's interesting is that the procedure name becomes mangled (as suggested above). If I set a basePath and visit a route endpoint like emails.getEmail, it says it cannot find ails.getEmail. Reverting the basePath resolves this. Note that it does respond with a 200 OK, but only to say the mangled procedure cannot be found.

[miaobuao]

maybe you forgot to update endpoint I meet same problem in astro. Solved by updating endpoint.

[github-actions[bot]]

This issue has been locked because we are very unlikely to see comments on closed issues. If you are running into a similar issue, please create a new issue. Thank you.