How to get custom import aliases

how can i implement custom import aliases in wasp? for example shadcn ui library

3 Replies

Hi @ArDev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement custom import aliases in Wasp, you can modify your vite.config.ts file in your src/client directory. Here is an example of how you can set up an alias:

import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

import path from "path";
import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

However, please note that this might not work directly with the shadcn-ui library as it seems to require a package.json file to run its initialization command. There have been discussions in the Wasp community about this, but it seems there isn't a straightforward solution yet. You can refer to this gist (https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553) for a possible workaround. Also, please note that as of Wasp 0.12.0, the client and server separation is no longer relevant, so the @client and @server import aliases are no longer used in Wasp. For more information, you can refer to these discussions: - Discord support thread: Unsure about how to add shadcn/ui to Wasp (https://discord.com/channels/686873244791210014/1165070629905649725) - Github Issue (closed): Add @client and @server import aliases to tsconfig (https://github.com/wasp-lang/wasp/issues/1415) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ArDev, 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?

ArDevOP•4mo ago

great thanks @kapa.ai (https://gist.github.com/infomiho/b35e9366e16913949e13eaba0538f553) that worked

Gist

Using ShadCN with Wasp 0.12+

Using ShadCN with Wasp 0.12+. GitHub Gist: instantly share code, notes, and snippets.

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad to hear that the solution worked for you! If you have any more questions or run into any other issues, feel free to ask. Happy coding with Wasp! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ArDev, 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?

Gaming

Programming

How to get custom import aliases