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?9 Replies
@zirkelc I have the exact same issue. Were you able to solve this?
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.
@zirkelc Thanks! Which one did you go with?
@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.
hi i know this is a long time ago but i'm having the exact same issue but having no luck setting up a shared tsconfig and the paths being respected
can you show me a bit of that tsconfig and how you got the path aliases to work out?
Same here, no luck setting it up correctly 😦
@avvo @v1narth sorry, just saw your message. Is your problem still relevant?
I managed to workaround, im not sure what did the trick for me 😅, i think i added paths for the server in the client tsconfig, which solved it, but now i can accidentally import server files in client which isnt great
Yes, but that's is unavoidable when using Typescript path aliases. There are two new alternatives:
1. Node.js sub-path imports in the client
2. exporting the trpc outer types from the server and installing the server package as dependency into the client package