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'
Oldest comments (10)
Thank you so much! That really helped me, spent half of my day trying to resolve problems with using aliases.
Does this work for nested paths? I'm trying to do something like this, and the nested folder isn't working for me:
Hi @anna
For multiple aliases, you can follow this answer on stackoverflow.
stackoverflow.com/a/75201776/3144344
This really helped, Thanks
So helpful, thanks!
Wow, thanks a lot Alex! It sure did the work done <3
how we can add auto suggestions for VS Code?
Thanks for that ❤️
Awesome, worked a charm :)
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?