Vite + TypeScript で絶対パスでの import を解決する

いわゆる absolute imports と呼ばれる、次の形式での import を解決したい。

import { MyComponent } from "@/components/MyComponent";

tsconfig.json

まず tsconfig.json の設定に次があるはず。なければ TypeScript がエラーを出している。

tsconfig.json

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

Vite での設定

TypeScript での設定を Vite で使い回せる vite-tsconfig-paths というパッケージを使う。

https://github.com/aleclarson/vite-tsconfig-paths

で、 vite.config.ts で次のように設定する。

vite.config.ts

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

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

plugin は書いた順に読み込まれていくっぽいので既存の plugin 設定の前に仕込めばいいんじゃなかろうか。