How to use absolute Imports using React with Ts and Vite

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

Comments

[Eamonn Walsh]

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" }],
},

[jalalbmnf]

Easier

export default defineConfig({
resolve: {
alias: [{ find: "@", replacement: "/src" }],
},
plugins: [react()],
});

[veroxcrown]

Thank you for your post!! Clear and really helpful.

[Israel Moreno]

Good Article ! Thanks for your post !

[Trần Quốc Việt]

how i can do that on my project use .jsx file insteal .ts file ??

[Nadeem Shareef]

create a file name .jsconfig and you should be able to replicate the same.

[Triet M Huynh]

Thank you so much! This is really helpful.