How to set multiple aliases in vite react?

Question

Vite by default does not support src alias like

import counterReducer from "@src/pages/counter/counter.slice";

Every time you will have to pass the full relative path like this

import counterReducer from "../../src/pages/counter/counter.slice";

Is there any way we can shorten these relative paths?

Answer 1

Yes, vite doesn't come with the default configuration of aliases, but you can define your own aliases.

Step: 1 Open "vite.config.js" and add your aliases.

 import { defineConfig } from "vite"; import react from "@vitejs/plugin-react-swc"; import path from "path"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: { "@": path.resolve(__dirname, "./src/"), components: `${path.resolve(__dirname, "./src/components/")}`, public: `${path.resolve(__dirname, "./public/")}`, pages: path.resolve(__dirname, "./src/pages"), types: `${path.resolve(__dirname, "./src/@types")}`, }, }, });

Step 2: Open tsconfig.json or jsconfig.json and append this code under compiler options.

 "baseUrl": ".", "paths": { "@/*": ["./src/*", "./dist/*", ""], "pages/*": ["src/pages/*"], "components/*": ["src/components/*"], "types/*": ["src/@types/*"], "public/*": ["public/*"] }