【React + Vite + TypeScript】ビルド時に'vite/client'が見つからない問題の解決策

1.問題の発生

私たちのプロジェクトではReactとViteを一緒に使用しており、TypeScriptを採用しています。ところが、最近ビルドプロセスに問題が生じました。具体的には、以下のコマンドを実行したところ、エラーが発生しました。

npm run build

エラーメッセージは次のようなものでした。

Cannot find type definition file for 'vite/client'. The file is in the program because: Entry point of type library 'vite/client' specified in compilerOptions

このエラーメッセージによると、vite/clientの型定義ファイルが見つからないという問題が発生しているようです。

2.設定の見直し

原因を探るために、まずはTypeScriptの設定ファイル(tsconfig.json)を見直してみました。設定ファイルは以下のようになっていました。

{
    "compilerOptions": {
      "types": [ "vite/client","node"],
      "typeRoots": ["./node_modules/@types/", "./types"],
  }
}

ここで、問題の箇所が見つかりました。typeRootsの設定で、vite/client.d.tsが格納されているであろうディレクトリnode_modules/vite/が含まれていないのです。

3.問題の解決

問題の解決策は、typeRootsに"./node_modules"を追加することでした。以下が修正後のtsconfig.jsonです。

{
    "compilerOptions": {
      "types": [ "vite/client","node"],
      "typeRoots": ["./types", "./node_modules"],
  }
}

これで、TypeScriptはvite/client.d.tsを見つけることができ、ビルドも正常に完了します。

4.まとめ

ここでは、React + Vite + TypeScriptの環境でビルド時に'vite/client'が見つからないという問題とその解決策について説明しました。設定を見直すだけで解決できたこの問題は、開発中にしばしば遭遇するような典型的なケースかもしれません。

設定ファイルは我々の指示通りに動作するため、不具合が発生した場合にはその設定を再確認することが重要です。思わぬ箇所に問題の原因と解決策が隠されていることがあります。

今回のケースが、同様の問題に直面した他の開発者の参考になれば幸いです。