today I am going to talk about How to use absolute Imports using React with Ts and Vite
as you can see here I am using ...
to find the path of components in order to use them, it looks fine since I do not have deep path.
to sum up in order to avoid it you can easily use this in your
tsconfig.json
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"~/*": ["./*"]
},
}
and after that go to vite.config.ts
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
},
},
and it's done
Thanks for reading this article and if you have any suggestions you are welcome
Oldest comments (7)
Thank you so much! This is really helpful.
how i can do that on my project use .jsx file insteal .ts file ??
create a file name
.jsconfig
and you should be able to replicate the same.Good Article ! Thanks for your post !
Thank you for your post!! Clear and really helpful.
Easier
export default defineConfig({
resolve: {
alias: [{ find: "@", replacement: "/src" }],
},
plugins: [react()],
});
I have been unable to get this to work
with
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"~/": ["./"]
},
}
On both
resolve: {
alias: {
'~': path.resolve(__dirname, 'src'),
},
},
and
resolve: {
alias: [{ find: "@", replacement: "/src" }],
},