In one of my side projects where I was constantly calling components in React, the paths such as ../../../ were bothering me. So, I created a React project with Vite. I had previously tried it with the Craco library, but then I realized that Vite had a more straightforward integration that already supported it, and I wanted to share it with you.
- React
- TypeScript
- Vite
Steps to set this up:
Step 1:
In "vite.config.ts":
import * as path from 'path'
export default defineConfig({
plugins: [react()],
resolve: {
alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }],
},
});
Step 2:
In "tsconfig.json":
{
"compilerOptions": {
"types": ["node"],
"paths": {
"@/": ["./src/"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
Usage:
import Comp from '@/components/Loading'
Top comments (0)