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
Collapse
 
8ctopotamus profile image
Josh •

Worked perfectly! Thanks for sharing! 😎

Collapse
 
emmanuelisenah profile image
Emmanuel Isenah •

Finally got it working. Thank you

Collapse
 
tranduchoa profile image
Trần Đức Hòa •

Great instructions! Thanks man.

Collapse
 
m3cv1no profile image
Majd Hemud •

Thank you so much, it was really helpful 😁🙌

Collapse
 
hadisamadzad profile image
Hadi Samadzad •

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

Collapse
 
minadimyan profile image
Mina Demian •

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

Collapse
 
devabsiddik profile image
Ab Siddik •

Thanks a lot bro

Collapse
 
quoczuong profile image
Zuong •

I created an account just to say thank you

Collapse
 
ajeetkumarrauniyar profile image
Ajeet Kumar •

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'),
    },
  },
});
Enter fullscreen mode Exit fullscreen mode

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/*"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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?
Enter fullscreen mode Exit fullscreen mode

Please Help!

Collapse
 
henryzarza profile image
Henry Zarza •

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"]
}

Collapse
 
ajeetkumarrauniyar profile image
Ajeet Kumar •

Thank you for the reply. I have figured out the solution here... stackoverflow.com/questions/777661...

Collapse
 
danielrios549 profile image
Daniel Rios •

Is there an option to use these alias in path parameter of a function? I would like to use in a fs.readdirSync to not enter the whole path

Collapse
 
itayperry profile image
Itay •

Hi, do I need to install "path" package..? It doesn't come with a new react-typescript vite template.

Collapse
 
tilly profile image
Tom Tillistrand • • Edited

If you're using Node as your runtime, you don't need to. path is one of Node's built-in modules.