Issue inspecting components that import TRPC

[hagabaka]

I'm working on a project using TRPC and Vue. When any component imports the TRPC client or any procedure, inspecting it leads to the error below, and nothing shows in the component tab.

The first line of the stacktrace points to a line inside createTRPCProxyClient.

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

I can avoid the error by wrapping the procedures in functions and importing only the wrappers into components. Anyone know why this is happening?

[6XGate]

Just ran into this, and the only alternative workaround I can find is to use defineComponent and not expose the rpc object. I'm using provide/inject in my case and calling inject in a <script setup> triggered the issue. But, wrapping the RPC may provide a better interface though?

[Lilja]

Also ran into this. In my experience it was because my trpc client was called client. Renaming it to apiClient resolves the issue.

I wonder if client is some reserved property/object that vue-devtools thinks is some internal object.

More info: trpc/trpc#5138