【ITニュース解説】【Vite Error Resolution】How to Fix the “vite-tsconfig-paths Not Found” Issue

ReactとViteを使った新しいプロジェクトを作成した後、開発サーバーを起動しようとした際に「vite-tsconfig-pathsが見つからない」というエラーが発生することがある。これは、Viteの設定ファイル(vite.config.ts)内でvite-tsconfig-pathsというモジュールがインポートされているにも関わらず、プロジェクトの依存関係としてインストールされていないことが原因だ。

vite-tsconfig-pathsは、TypeScriptのtsconfig.jsonファイルに記述されたパスエイリアスをViteで利用できるようにするためのViteプラグインである。パスエイリアスとは、長い相対パスを短く記述するための機能で、例えばsrc/components/Button.tsxを@components/Buttonのように記述できるようになる。これにより、コードの可読性や保守性が向上する。

このエラーを解決するには、大きく分けて2つの方法がある。

1つ目は、vite-tsconfig-pathsを実際に利用する場合。この場合は、まずvite-tsconfig-pathsをプロジェクトにインストールする必要がある。ターミナルを開き、プロジェクトのルートディレクトリに移動してから、次のコマンドを実行する。

Copy
1npm install vite-tsconfig-paths -D
2# または
3yarn add -D vite-tsconfig-paths

このコマンドを実行することで、vite-tsconfig-pathsが開発時の依存関係としてプロジェクトに追加される。-Dまたは--save-devオプションは、vite-tsconfig-pathsが開発環境でのみ必要であることを示す。

インストールが完了したら、Viteの設定ファイル(vite.config.ts)を修正する必要がある。具体的には、vite-tsconfig-pathsをインポートし、Viteのプラグインとして登録する。vite.config.tsファイルを開き、次のように修正する。

Copy
1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react";
3import tsconfigPaths from "vite-tsconfig-paths";
4
5export default defineConfig({
6  plugins: [react(), tsconfigPaths()],
7});

上記のコードでは、まずvite-tsconfig-pathsをインポートしている。次に、defineConfig関数内で、plugins配列にtsconfigPaths()を追加している。これにより、Viteはtsconfig.jsonに記述されたパスエイリアスを正しく解決できるようになる。

2つ目の解決策は、vite-tsconfig-pathsを必要としない場合。例えば、プロジェクトでパスエイリアスを使用していない、または他の方法でパスを解決している場合などが該当する。この場合は、vite.config.tsからvite-tsconfig-pathsに関する記述を削除するだけでエラーは解消される。

vite.config.tsファイルを開き、次の行を削除またはコメントアウトする。

Copy
1import tsconfigPaths from "vite-tsconfig-paths";
2
3// plugins: [react(), tsconfigPaths()],

または

Copy
1// import tsconfigPaths from "vite-tsconfig-paths";
2
3plugins: [react()],

上記の修正により、vite-tsconfig-pathsがViteの処理から除外され、「vite-tsconfig-pathsが見つからない」というエラーは発生しなくなる。

エラーの原因は、Viteの設定ファイルで指定されたプラグインがインストールされていないことにあった。解決策は、必要に応じてプラグインをインストールするか、設定ファイルからプラグインの参照を削除することである。どちらの方法を選択するかは、プロジェクトの要件によって異なる。TypeScriptのパスエイリアスを利用する場合はインストールし、そうでない場合は削除する。