zirkelc
zirkelc12mo ago

TypeScript Alias Imports don't get resolved ont the Client

I have a Monorepo with a multiple /packages/* packages, each has its own tsconfig.json. I noticed that I get type errors on the client side if I use TypeScript alias path imports on the server package. The alias import paths for the server are only defined in the server/tsconfig.json and not in the client/tsconfig.json. If I change the alias imports on the server side to relative imports, it works on the client. It seems like TypeScript cannot follow the imports correctly from client to server, because it doesn't check the server tsconfig. Anyone the same issue?
4 Replies
Shooe#6468406
Shooe#64684062mo ago
@zirkelc I have the exact same issue. Were you able to solve this?
zirkelc
zirkelc2mo ago
Yes, there are two options from my point of view: 1. create a shared global tsconfig.json in your project root that defines the path aliases. Then your server and client have their package-level tsconfig.json inherit from the shared tsconfig.json. All path alaises are defined in the shared tsconfig.json, the package-level tsconfig.json have no alaiases on their own. 2. use typescript projects refrences like here: https://github.com/zirkelc/trpc-monorepo-with-project-references
GitHub
GitHub - zirkelc/trpc-monorepo-with-project-references
Contribute to zirkelc/trpc-monorepo-with-project-references development by creating an account on GitHub.
Shooe#6468406
Shooe#64684062mo ago
@zirkelc Thanks! Which one did you go with?
zirkelc
zirkelc5w ago
@Shooe#6468406 I used the first option with global paths, just because I have a big monorepo and it was easier to make this change. I think the second option is better if you have multiple packages, but I have not enough experience with project references and there might be some doenside that I'm not aware of.
More Posts
merging other routers to appRouterHey everyone, I am using the https://icflorescu.github.io/trpc-sveltekit package in my SvelteKit proCan I get non-redacted INTERNAL_SERVER_ERRORS in production?I'm trying to debug crashes in production, and having a hard time. As far as I can tell, errors are Error handling: Zod errors and manually thrown TRPCErrors have different shapeIf zod validation fails, the client-side `error.message` contains a JSON encoded array of errors, buprefetch() within getServerSideProps does not provide data upon manual refreshingWithin getServerSideProps: `await ssh.user.getDepositInfo.prefetch(userId);` `await ssh.user.getFQOHow to modify existing cache data?I have a message queue being fetched with InfiniteQuery requests. When adding a new message, I want When using createServerSideHelpers can the context be typed as GetServerSidePropsContext?I assume the reason we should recreate the context when using createServerSideHelpers is because theQuery data is undefined for a bit and is then populated. How to use with React State?I have an asychronous submit function that's called upon a button press. It refetches the query witshould we use tRPC for handling form submittion or not?Hey everyone, I've started using tRPC for my API endpoints and my project is based in Svelte/SvelteKWhat's the benefit of using the context instead of a direct import for the database connection?I've wondered why I should use the tRPC context instead of just importing my database singleton fromUsing both tRPC React client AND tRPC React Query clientHey all! We are successfully using both the React client and the React Query client. We do this beca