How do I use Typescript path aliases in Vite?

Issue

How do I set up and use typescript path aliases like @/shared/types in a Vite project? I'm getting this error: Failed to resolve import "@/shared/types"

Here's a part of my tsconfig.json:

  "compilerOptions": {
    "baseUrl": "../",
    "paths": {
      "@/*": ["./*"]
    }
  }

Solution

There's a plugin for that: vite-tsconfig-paths. You run

npm install --save-dev vite-tsconfig-paths

and import it in your vite.config:

// ...
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
});

https://www.npmjs.com/package/vite-tsconfig-paths

Answered By - mbojko