What's the best way to do import aliases?
I'm not sure how best to create import aliases with Wasp (if it's possible). I attempted a few ways, including adding it to all three tsconfig files and vite config, but none have worked. I'm using
*.wasp.ts for the app config if that's relevant. I know there's an issue open regarding aliases, so is it impossible for now? Thanks in advance!7 Replies
Hi @Zeke. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Currently, setting up custom import aliases in Wasp is not straightforward and may not be fully supported out-of-the-box. There have been discussions and open issues about introducing import aliases (such as @client, @server, or @ext-src) to simplify imports and improve developer experience. For example, there was an issue proposing the use of TypeScript paths and tools like tsconfig-paths for both client and server code, but this appears to be a work in progress and not yet officially supported in Wasp's generated projects or tooling [Use import aliases in Wasp generator templates].
Additionally, a previous effort to add @client and @server aliases to tsconfig was made obsolete by changes in Wasp 0.12.0, which removed the client/server separation [Add @client and @server import aliases to tsconfig].
Attempts to set up aliases via tsconfig or Vite config alone are unlikely to work reliably, because Wasp's code generation and project structure may not respect or propagate those settings throughout the build and runtime environments. There is ongoing discussion about making import paths more uniform and robust, but as of now, the knowledge sources do not describe a fully working solution for user-defined import aliases in Wasp [Use import aliases in Wasp generator templates].
Summary:
At this time, it is not officially possible to set up custom import aliases in Wasp in a way that works seamlessly across the whole project. The Wasp team is aware of the need and is considering solutions, but there is no documented, supported approach yet. If you need this feature, you may want to follow or contribute to the relevant GitHub issues for updates. If you have a specific use case, feel free to share it—there may be workarounds, but the knowledge sources do not provide a general solution at this time. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zeke, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
At this time, it is not officially possible to set up custom import aliases in Wasp in a way that works seamlessly across the whole project. The Wasp team is aware of the need and is considering solutions, but there is no documented, supported approach yet. If you need this feature, you may want to follow or contribute to the relevant GitHub issues for updates. If you have a specific use case, feel free to share it—there may be workarounds, but the knowledge sources do not provide a general solution at this time. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zeke, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?
😢
Hey @Zeke. Yeah, there's a sad and a complicated story here. In short - it's not yet possible to do without hacks that IMO don't justify the benefits.
What do you need the aliases for? Maybe we can find an alternative
I just want to be able to do @components/Button or @hooks/useTheme rather than a relative path
@src/components/Button doesn't work for me (only works in the wasp configYeah, that's the usual request. Makes perfect sense, but we didn't get it working yet. It is on our top priority list though, as it's one of our most requested features.
I've added this thread to the issue: https://github.com/wasp-lang/wasp/issues/2518
GitHub
Support path aliases · Issue #2518 · wasp-lang/wasp
Reported in version 0.16.2 Allow users to define path aliases in their tsconfig.json files, For example: { "compilerOptions": { "paths": { "@/": ["src/"], ...
We really have to get this done ASAP
Alrighty, thanks!