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:
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.
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" }]
}
import Comp from '@/components/Comp'