goetzrobin Posts

goetzrobin

•Created by goetzrobin on 10/24/2023 in #❓-help

TS4111: Property 'error' comes from an index signature, so it must be accessed with ['error'].

I am trying to use trpc with AnalogJs, an Angular meta framework and Nx. We use the @nx/vite builder to build our application. While development works perfectly, I am running into the following errors when building the application:

> nx run test:build:production

node_modules/@trpc/client/src/TRPCClientError.ts:42:18 - error TS4111: Property 'error' comes from an index signature, so it must be accessed with ['error'].

  40 |   return (
  41 |     isObject(obj) &&
> 42 |     isObject(obj.error) &&
     |                  ^
  43 |     typeof obj.error.code === 'number' &&
  44 |     typeof obj.error.message === 'string'
  45 |   );

...

> nx run test:build:production

node_modules/@trpc/client/src/TRPCClientError.ts:42:18 - error TS4111: Property 'error' comes from an index signature, so it must be accessed with ['error'].

  40 |   return (
  41 |     isObject(obj) &&
> 42 |     isObject(obj.error) &&
     |                  ^
  43 |     typeof obj.error.code === 'number' &&
  44 |     typeof obj.error.message === 'string'
  45 |   );

...

The issue stems from the @nx/vite builder analyzing the .ts files inside @trpc/client/src and @trpc/server/src folders of my node_modules. I was wondering why those src directories and the .ts files are included and if you are aware of any issues with React, Nx, and Vite? Thanks already!

7 replies

TtRPC

•Created by goetzrobin on 5/31/2023 in #❓-help

Nitro and tRPC in vercel-edge

Hey there! I hope this is the right place to ask for help. I am trying to deploy an application with Nitro and tRPC with the vercel-edge preset. I am getting a weird proxy error when I deploy it without making any changes to how tRPC is handled.

TypeError: 'getOwnPropertyDescriptor' on proxy: trap reported non-configurability for property 'setTimeout' which is either non-existent or configurable in the proxy target
    at (index.mjs:1:1261145)
    at (index.mjs:1:1270611)
    at (index.mjs:1:1272087)
    at (index.mjs:1:1246628)
    at (index.mjs:1:1271597)
    at (index.mjs:1:1273439)
    at (__nitro:middleware.js:1:17)

TypeError: 'getOwnPropertyDescriptor' on proxy: trap reported non-configurability for property 'setTimeout' which is either non-existent or configurable in the proxy target
    at (index.mjs:1:1261145)
    at (index.mjs:1:1270611)
    at (index.mjs:1:1272087)
    at (index.mjs:1:1246628)
    at (index.mjs:1:1271597)
    at (index.mjs:1:1273439)
    at (__nitro:middleware.js:1:17)

I think I need to use the fetchRequestHanlder as described in the tRPC documentation for Fetch / Edge Runtimes https://trpc.io/docs/server/adapters/fetch They provide examples for Next.js, Remix, and SoldStart, but not Nuxt/Nitro. Nitro uses IncommingMessage and ServerResponse, while the fetchRequestHandler expects a Request and returns a Response. My initial, naive approach was to simply map back and forth between the two using these utilities I found for astro: https://github.com/withastro/astro/blob/2dca81bf2174cd5c27cb63cb0ae081ea2a1ac771/packages/integrations/vercel/src/serverless/request-transform.ts#L2 But again I am getting errors that seem to stem from Nitro using node-fetch under the hood? I am not experienced enough with the edge runtime or nitro to completely understand why it would not work and what needs to happen to make tRPC and Nitro on edge work together. If anyone has any pointers or if anyone has a repo of a Nuxt/Nitro project that uses tRPC on the edge that would be awesome! Thanks already for your help!

6 replies