DEV Community

Setup path aliases w/ React + Vite + TS

Alexander Kim on April 30, 2022

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...
Read full post
Collapse
 
annaspies profile image
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/**/*", "*"]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shekhardtu profile image
Hari Shekhar •

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

Collapse
 
gsoldateli profile image
Guilherme Soldateli •

So helpful, thanks!

Collapse
 
jonastolentino profile image
Jonas Tolentino • • Edited

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?

Collapse
 
rahmatdev profile image
Rahmat Sulistio •

how we can add auto suggestions for VS Code?

Collapse
 
celedonio2151 profile image
celedonio2151 •

Does anyone know how to add auto suggestions? Auto suggestions work with javascript for importing, but not with typescript?

Collapse
 
thalesbruno profile image
Thales Bruno •

Thanks for that ❤️

Collapse
 
mondal10 profile image
Amit Mondal • • Edited

This really helped, Thanks

Collapse
 
reactoholic profile image
Petar Kolev •

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

Collapse
 
varmiguemunoz profile image
Miguel Angel Muñoz •

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

Collapse
 
iamsoprada profile image
IamSoPradaYou •

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

Collapse
 
pjosxyz profile image
pjosxyz •

Awesome, worked a charm :)