Setup path aliases w/ React + Vite + TS

Out of the box vite doesn't provide "@" path alias to src, so we have to manually setup it. I suppose you're using Vite preset for react-ts.

Steps to setup this:

Step 1

vite.config.ts:

// also don't forget to `npm i -D @types/node`, so __dirname won't complain
import * as path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
  },
})

This would tell Vite about the alias.

Step 2

We're adding "@" alias for src directory (ts needs this).

tsconfig.json:

{
  "compilerOptions": {
    // ...rest of the template
    "types": ["node"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Usage

import Comp from '@/components/Comp'

Comments

[Anna]

Does this work for nested paths? I'm trying to do something like this, and the nested folder isn't working for me:

{
  "compilerOptions": {
    "baseUrl": ".",
    ...
    "paths": {
      "*": ["src/*", "node_modules/*"],
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "pages/*": ["src/constants/*"],
      "store/*": ["src/store/*"],
      "types/*": ["src/types/*"],
      "NestedFolder/*": [
        "src/components/NestedFolder/*"
      ],
    }
  },
  "include": ["src/**/*", "*"]
}

[Hari Shekhar]

Hi @anna
For multiple aliases, you can follow this answer on stackoverflow.
stackoverflow.com/a/75201776/3144344

[Jonas Tolentino]

Thank you very much...

but what if I want to use it in the pattern

import Container from '@components/Container'

how would the configuration look?

[Guilherme Soldateli]

So helpful, thanks!

[Miguel Angel Muñoz]

Nice! Thank you so. much I was blocked with this error.

[Thales Bruno]

Thanks for that ❤️

[Petar Kolev]

Wow, thanks a lot Alex! It sure did the work done <3

[Amit Mondal]

This really helped, Thanks

[pjosxyz]

Awesome, worked a charm :)

[Rahmat Sulistio]

how we can add auto suggestions for VS Code?

[IamSoPradaYou]

Thank you so much! That really helped me, spent half of my day trying to resolve problems with using aliases.