DEV Community

Aliasing paths in Vite projects w/ TypeScript

Tom Tillistrand on November 13, 2022

Aliasing paths can be a really handy way of referencing key directories in your project within deeply nested files. For example, take a look at the...

Read full post

Emmanuel Isenah • Aug 14 '23

Finally got it working. Thank you

Mina Demian • Jun 23 '23

Didn't work for me, this did: stackoverflow.com/questions/660436...

Majd Hemud • Jul 2 '23

Thank you so much, it was really helpful 😁🙌

Trần Đức Hòa • May 17 '23

Great instructions! Thanks man.

Josh • Jul 16 '23

Worked perfectly! Thanks for sharing! 😎

Hadi Samadzad • Sep 18 '23

After one whole day of testing many sets of configurations, finally you helped me, Thank you

Ab Siddik • May 30 '23

Thanks a lot bro

Wilson Gouanet • May 15

I followed the instruction but I think you should add the fact that in typescript project, it should be necessary to install @types/node to avoid type issues in vite.config.ts

pnpm add -D @types/node

Zuong • Dec 22 '23

I created an account just to say thank you

Ajeet Kumar • Jan 6 '24

I am trying to do so but didn't worked. I am using JavaScript, instead of Typescript.

vite.config.json

import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const __filename = import.meta.url;
const __dirname = path.dirname(__filename);

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ["js-big-decimal"],
  },
  server: {
    port: 8000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@components': path.resolve(__dirname, './src/components'),
    },
  },
});

and

package.json

{
  "name": "mern-wp-lms",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 5",
    "preview": "vite preview"
  },
  "dependencies": {
    //  existing dependencies
  },
  "devDependencies": {
    //  existing devDependencies
  },
  "resolve-path-alias": {
    "alias": {
      "@/*": "src/*",
      "@components/*": "src/components/*",
      "@assets/*": "src/assets/*"
    }
  }
}

Imported as import Header from "@components/Header";

Also, I had installed @types/node as per the instructions.

But still receiving this error

Failed to resolve import "@components/Header" from "src/pages/contacts/index.jsx". Does the file exist?

Please Help!

Henry Zarza • Jan 9 '24

As you're not using TypeScript, you should create a file named jsconfig.json in the root folder of your app and put the config there, something like this:

{ "compilerOptions": { "baseUrl": ".", "target": "es6", "paths": { "@/*": "src/*", "@components/*": "src/components/*", "@assets/*": "src/assets/*" } }, "exclude": ["node_modules"] }