Am I the only one struggling with pnpm + TypeScript monorepo + trpc?

Hello all, When using pnpm in a TypeScript monorepo without node-linker, I hit those errors:
web/src/lib/trpc.tsx:7:14 - error TS2742: The inferred type of 'trpc' cannot be named without a reference to '../../../api/node_modules/@snaplet/sdk/src'. This is likely not portable. A type annotation is necessary.

7 export const trpc = createReactQueryHooks<WebRouter>()
web/src/lib/trpc.tsx:7:14 - error TS2742: The inferred type of 'trpc' cannot be named without a reference to '../../../api/node_modules/@snaplet/sdk/src'. This is likely not portable. A type annotation is necessary.

7 export const trpc = createReactQueryHooks<WebRouter>()
Types sharing between packages when using pnpm + TypeScript is quite broken, and I'm not sure what's the best move to solve it. Ideally I shouldn't have to alter my compilerOptions.paths, or install extra deps in the root. πŸ˜… I opened a discussion about it here if you want to participate: https://github.com/orgs/pnpm/discussions/6367
J
jgouxβ€’379d ago
I can solve this one πŸ‘† (type sharing between internal packages) by altering the paths of the package exporting the types, I have to make it point to the other package's real location:
"@snaplet/sdk": ["../packages/sdk"],
"@snaplet/sdk": ["../packages/sdk"],
but that's just a hack and I hate it πŸ˜‚ I ended not touching the paths and installed my @snaplet/sdk package at the root using "@snaplet/sdk": "link:packages/sdk", but I still have to manually delete the local symlink created for it in the dependant package πŸ€”
AE
Ahmed Elsakaanβ€’378d ago
actually i ran through this problem before you can do export type {} from '@snaplet/sdk'; in the index file of the trpc package no clue why it works but it does
N
Nickβ€’378d ago
This isn’t really a hack, it’s the right solution. Depending on your repo setup you could also install the API into the Client. I’d like us to provide a decent guide on this stuff though as it’s a common confusion
J
jgouxβ€’378d ago
the api is installed into the client, that's why I call it a hack To me, even in a monorepo, you should not use paths to look outside of your package boundaries I actually "solved" the issue without touching the paths I needed to use pnpm's public hoisting so trpc gets installed at the root of the monorepo and satisfies TS weird resolution with symlink (which is the root cause of the error) I opened a discussion about it on pnpm's repo https://github.com/orgs/pnpm/discussions/6367
N
Nickβ€’378d ago
Well yes the problem is that the client can’t resolve the tRPC types, by hoisting or installing those into your client it makes them available
AE
Ahmed Elsakaanβ€’378d ago
did you try this?
J
jgouxβ€’378d ago
yes it was also suggested in the issues I linked in the discussion, it didn't work in my case
N
Nickβ€’378d ago
I did say depending on your setup though, there are some extra bits to do. Thing is typescript != node, and they both have some different bits they expect to see. Some package.json tweaks to the types key may also fix this It’s normal to add a path or project reference so that type resolution can work between monorepo packages
J
jgouxβ€’378d ago
I'd say the project references are meant to solve this, not paths (I use project references!)
N
Nickβ€’378d ago
I’d love for us to write up some best practices around this, it’s hard to debug and answer from afar, and a big element of a tRPC project working right
J
jgouxβ€’378d ago
If you do, please ping me on GitHub I'd love to contribute πŸ™‚
D
DiamondDragonβ€’258d ago
i seem to have run into this as well. using drizzle and neon here, which is in another package being imported into packages/trpc. but removing the neon package and reinstalling at the root seems to fix
No description
More Posts
tRPC standalone server in monorepoHi, I'm using t3-stack monorepo as my base and I've swapped out NextJS backend for standalone HTTP Codemod to v10 is not modifying any fileHello πŸ‘‹, I must be super dumb but running `pnpm dlx trpc-v10-migrate-codemod ` in my project isn't No overload matches this call when outputting unionsHello there πŸ‘‹, I have this simple procedure (we're not fully migrated on v10 yet, using interop): [help] Uncaught (in promise) TRPCClientError: Property description must be an object: uAfter building on linux, I visit the site. And Chrome console shows this error. But if I build on myHow can I make tRPC+NextJs APIs faster? (db and functions region is already same)Hi, I have migrated my website backend (https://clubofcoders.com) from NestJs + Prisma + Cloud Run tThrowing fastify errors when using fastify adapterHello, I'm using `fastifyTRPCPlugin` from `@trpc/server/adapters/fastify` and trying to throw errorsConfused about createProxySSGHelpersIf you can use this helper inside of `getServerSideProps` without having `ssr: true` what is the difHow to check if data is being prefetched?What is a method to check if ssg prefetching actually occurs? Through the network tab?How can I access ctx from inside of a procedure?``` const appRouter = t.router({ helloTab: t.procedure.input(z.object({ url: z.string().url() })).Async User Call in `createContext` (context.ts) or in `isAuthed` (in trpc.ts)Hi all! Should I be getting the user in all requests via createContext in the following async call `'req' of undefined in onError of express middlewareI've recently noticed that I get a bunch of errors regarding req object missing in ctx for onError pMutations and Queries in React Contexts causing unexpected behaviorsIn my organization, we recently moved to put all of our mutations/queries into React Contexts and ouCustom error managementHey peeps! I could've sworn I created a GitHub issue about this, but I must've been dreaming, becauscontext questionWhy are the context examples only showing opinionated examples with next/react auth ? Also i find itasync middlewareis it possible to define an async middleware? I want to do something like this but it throws errors The type of the second route of the nested route is neverhttps://github.com/StringKe/nx-mulit-trpc-type-error/blob/main/apps/app1/src/pages/index.tsx#L12errorFormatter ignored when using appRouter.createCallerMy errorFormatter works correctly in the actual application using an adapter, e.g. ``` trpcExpress.Is there a way to define the Websocket protocol when using wsLink()I am attempting to use tRPC with Azure's Pub/Sub Websockets service it appears to require custom proThe inferred type of this node exceeds the maximum length the compiler will serialize.Hey, there I am running into this error when I have more than 12 routers in the mergeRouters functioQuickstart not workingHello there, There is a type error in the quickstart example if i'm not mistaken. I pretty much co