Vite: Import path alias only setting tsconfig.json

Hello!! These days I usually use vite. And I usually set alias but, in generally we need to set alias to tsconfig.json and vite.config.ts. I think it is too trouble!!
If you want configure only tsconfig.json, I recommand this article.

The problem can be solved by vite-tsconfig-paths package.

1. You need to install the package via below command

npm i -s vite-tsconfig-paths

2. Plese configure vite.config.ts like below

export default defineConfig({

  //... some configs

  plugins: [tsconfigPaths()],

  //... some configs

})

3. Plese configure tsconfig.json which you like. Below is my sample

{
  "compilerOptions": {
    "paths": {
      "@": ["src"],
      "@/*": ["src/*"],
      "$lib":["src/lib"],
      "$lib/*":["src/lib/*"]
    }
  }
}

4. Done

Note

You can use vite-tsconfig-paths on SvelteKit project. And it doesn't work, plese try delete generated folder for dev server like .svelte-kit.

Thank you for reading this article!!

Comments

[Thiago Silva Lopes]

Not working currently in a Vue 3 project with Vite :/

[Mohammad Jawad (Kasir) Barati]

Also not working on my project, React version 18.2.0 and Vite version 4.3.5 even thought when I activate the debug mode it says it mapped the import to the correct absolute path. BTW I have a monorepo and I am importing something from another app in another app. Here is more detail: github.com/aleclarson/vite-tsconfi...

Any idea @tikashi @thiagoow ?

[karts-with-freaking-lasers]

After spending an entire day setting up ts-config.json PROPERLY (well, it's at least working now) in my inherited project, I found myself at some reason similar to why this article was delivered: I made my code beautiful!

...only to discover that Vite could not compute. Yours the 3rd article Google delivered to my inquiry: "vite svelte tsconfig.json custom paths".

After the excruciating day I had yesterday, I followed your instructions exactly as you described and Bob's your Uncle, worked like a charm. I was deeply troubled when I encountered "another ts-config anamoly" and am blessed by the ease by which this was resolved.

I am so grateful to you for putting it together.

Cheers!

[Nikola Stojaković]

This is the only solution which worked for me so far - thank you!