bug: client[procedureType] is not a function

[Lilja]

Provide environment information

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 9.53 GB / 15.59 GB
    Container: Yes
    Shell: 3.6.1 - /bin/fish
  Binaries:
    Node: 18.18.2 - ~/.local/share/nvm/v18.18.2/bin/node
    Yarn: 1.22.4 - /mnt/c/Users/Erik Lilja/AppData/Roaming/npm/yarn
    npm: 9.8.1 - ~/.local/share/nvm/v18.18.2/bin/npm
    pnpm: 8.11.0 - /home/linuxbrew/.linuxbrew/bin/pnpm
  npmPackages:
    @trpc/client: ^10.44.1 => 10.44.1
    @trpc/server: ^10.44.1 => 10.44.1
    typescript: ^5.3.2 => 5.3.2

Describe the bug

TypeError: client[procedureType] is not a function
    createTRPCClientProxy index.mjs:161
   <omitted>

I edited node_modules/@trpc/client/dist/index.mjs:

/**
 * @deprecated use `createTRPCProxyClient` instead
 * @internal
 */ function createTRPCClientProxy(client) {
    return createFlatProxy((key)=>{
        if (client.hasOwnProperty(key)) {
            return client[key];
        }
        if (key === '__untypedClient') {
            return client;
        }
        return createRecursiveProxy(({ path , args  })=>{
            const pathCopy = [
                key,
                ...path
            ];
            const procedureType = clientCallTypeToProcedureType(pathCopy.pop());
            const fullPath = pathCopy.join('.');
            console.log('trpc debug', { fullPath, procedureType, client });  // <--------
            return client[procedureType](fullPath, ...args);
        });
    });
}

Link to reproduction

N/A

To reproduce

Really hard for me to reproduce, hoped I could get some pointers to help me debug it further.
Is effect.raw some kind of tRPC internal? It's not a query/mutation of mine.

It only happens when I import the trpc client. If I comment it out it doesn't throw.

Additional information

Vue SPA with latest vue, vue-query latest.

The app is at /project/<uid>, so my App.vue is loading first which is calling user.me, then router is rendering Project.vue which imports the trpc client.

// src/trpc.ts
import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "../../api/src/router";
import type { AdminRouter } from "../../api/src/admin";
import superjson from "superjson";

export const client = createTRPCProxyClient<AppRouter>({
  transformer: superjson,
  links: [
    httpBatchLink({
      url: "http://localhost:4000/consumer/trpc",
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: "include",
        });
      },
    }),
  ],
});

export const adminClient = createTRPCProxyClient<AdminRouter>({
  transformer: superjson,
  links: [
    httpBatchLink({
      url: "http://localhost:4000/admin/trpc",
      fetch(url, options) {
        return fetch(url, {
          ...options,
          credentials: "include",
        });
      },
    }),
  ],
});

👨‍👧‍👦 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

[Nick-Lucas]

Hi, thanks for the report. Could you please provide a reproduction repo so we can investigate? I appreciate it’s proving tricky for you to reproduce, but right now we have to assume there’s some weird usage you’re not showing us, so we have far less information than you to help

[Lilja]

After debugging it further, it would seem like it's the vue-devtools that is the culprit here. By changing the import to

import {client as apiClient} from "./trpc" the errors are no longer present.

Maybe it's the vue devtools that are doing some introspection into what it think is some internal property.

I changed const client = createTRPCProxyClient(...) into const apiClient = ...

[Lilja]

For tracking, I just found this: vuejs/devtools-v6#2042