Vite + TypeScript でimportの@エイリアスが利かない

素のVite環境でTypeScriptの開発をしようとしたときにimportのパスに@エイリアスが使用できず少しはまったので解決方法のメモです。

Vite環境を構築する

はじめに公式のやり方に沿ってVite環境を構築します。

1. 任意のディレクトリでnpm create vite@latestを実行
2. vanilla を選択
3. TypeScript を選択
4. npm install

npm run devを実行し表示されたURLにアクセスして画面が表示されたらOKです。

importのパスに@を使用してみる

以下のようにパスを設定できるようにします。

// Before
import { moduleA } from '../../moduleA';
// After
import { moduleA } from '@/src/moduleA';

まずtsconfigに"paths"の設定を追加します。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    // 追加
    "paths": {
     "@/*": ["./*"]
    },
    ...省略
  },
  "include": ["src"]
}

この設定でTypeScript上のエラーはなくなりますが、npm run devを実行してみるとエラーになります。

vite-tsconfig-pathsをインストール

"paths"の設定はあくまでTypeScriptのコード間でimportの解決をしてくれるだけのようで、実行時のパスはそのまま'@/src/moduleA'となってしまうようです。

これはTypeScriptの仕様みたいなので、実行時のパスの解決のためvite-tsconfig-pathsをインストールします。

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

つづいてvite.config.tsを追加します。

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

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

これで再度npm run devを実行するとパスが解決されてエラーがなくなります。

参考サイト