TypeScriptで開発を行っていると、「Cannot find module 'x'」というエラーに遭遇することがあります。このエラーは、TypeScriptコンパイラがモジュールを見つけられない場合に発生します。本記事では、このエラーの一般的な原因と解決方法について詳しく説明します。

エラーの原因

「Cannot find module 'x'」エラーが発生する主な原因は以下の通りです：

1. モジュールがインストールされていない

2. `tsconfig.json`の設定が不適切

3. ファイルパスの指定が間違っている

4. 型定義ファイル（`.d.ts`）が見つからない

解決方法

1. モジュールのインストール確認

まず、必要なモジュールが正しくインストールされているか確認しましょう。

npm install <module-name>

または

yarn add <module-name>

2. tsconfig.jsonの設定確認

`tsconfig.json`ファイルの設定を確認し、必要に応じて修正します。

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "*": ["node_modules/*"]
    }
  }
}

3. ファイルパスの確認

インポート文のファイルパスが正しいか確認します。相対パスや絶対パスを適切に使用しているか確認しましょう。

// 正しい相対パスの例
import { MyComponent } from './components/MyComponent';

// 正しい絶対パスの例（tsconfig.jsonのbaseUrlとpathsの設定が必要）
import { MyUtil } from '@utils/MyUtil';

4. 型定義ファイルのインストール

サードパーティライブラリを使用している場合、型定義ファイルが必要になることがあります。

npm install --save-dev @types/<module-name>

5. モジュールの再ビルド

時として、キャッシュの問題でエラーが発生することがあります。次のコマンドでプロジェクトを再ビルドしてみましょう。

npm run build

6. IDEの再起動

IDE（統合開発環境）を再起動することで、問題が解決することもあります。

まとめ

「Cannot find module 'x'」エラーは、TypeScript開発でよく遭遇する問題です。本記事で紹介した解決方法を順に試していくことで、ほとんどの場合でエラーを解決できるはずです。

開発中にこのエラーに遭遇した場合は、落ち着いて各ステップを確認し、適切な対処を行いましょう。エラーメッセージをよく読み、具体的なモジュール名や問題の箇所を特定することが、迅速な解決への近道となります。

TypeScriptの開発環境を適切に設定し、モジュールの管理を慎重に行うことで、このようなエラーを未然に防ぐことができます。定期的なプロジェクトの依存関係の確認と更新も、スムーズな開発を続ける上で重要です。