TypeScriptローカルファイルインポートエラー「TS2307: Cannot find module」を解決する
TypeScriptでローカルファイルをインポートする際に発生するエラー「TS2307: Cannot find module」
error TS2307: Cannot find module '<ファイル名>'.
このエラーは、import ステートメントで指定されたファイルが見つからないことを意味します。このエラーを解決するには、以下の原因と解決策を確認してください。
原因
- ファイルパスが間違っている
import ステートメントで指定されたファイルパスが間違っている可能性があります。ファイルパスは、相対パスまたは絶対パスで指定できます。
- 相対パス: 現在のファイルからの相対的なパス
- 絶対パス: ファイルシステム上の絶対的なパス
例：
間違っている例:
import "./hoge.ts"; // ファイル名が間違っている
import "../foo/bar.ts"; // 相対パスが間違っている
正しい例:
import "./my-file.ts"; // ファイル名が正しい
import "../src/utils/index.ts"; // 相対パスが正しい
- ファイルが存在しない
指定されたファイルが存在しない可能性があります。ファイル名と拡張子が正しいことを確認してください。
- モジュールの名前が間違っている
export ステートメントでモジュールの名前が正しく指定されていない可能性があります。import ステートメントで指定されたモジュールの名前と一致する必要があります。
// my-file.ts
export default function myFunction() {}
// index.ts
import { myFunction } from "./my-file"; // モジュールの名前が間違っている
// my-file.ts
export default function myFunction() {}
// index.ts
import { myFunction } from "./my-file"; // モジュールの名前が正しい
- tsconfig.json ファイルの設定が間違っている
tsconfig.json ファイルの設定が間違っている可能性があります。以下の設定を確認してください。
rootDir: ソースファイルのルートディレクトリbaseUrl: モジュールの解決の基点となるディレクトリpaths: ファイルエイリアスの設定
{
"compilerOptions": {
"rootDir": "./src",
"baseUrl": "./src",
"paths": {
"@/*": ["./src/*"]
}
}
}
解決策
- ファイルパスとファイル名の確認
import ステートメントで指定されたファイルパスとファイル名が正しいことを確認してください。
- ファイルの存在確認
指定されたファイルが存在することを確認してください。
- モジュールの名前の確認
export ステートメントでモジュールの名前が正しく指定されていることを確認してください。
- --module オプションの指定
tsc コマンドを実行する際に --module オプションを指定して、モジュールの解決方法を指定することができます。
tsc --module commonjs index.ts
- --noImplicitAny オプションの指定
tsc コマンドを実行する際に --noImplicitAny オプションを指定すると、型が推論できない変数に対してエラーが発生します。
tsc --noImplicitAny index.ts
- 使用している TypeScript のバージョン
- 問題が発生しているコード
// index.ts
import "./hoge.ts"; // ファイル名が間違っている
// ファイル構成
├── index.ts
└── src
└── my-file.ts
このコードを実行すると、以下のエラーが発生します。
error TS2307: Cannot find module './hoge.ts'.
解決策:
ファイル名を my-file.ts に修正します。
// index.ts
import "./src/my-file.ts"; // ファイル名を修正
// ファイル構成
├── index.ts
└── src
└── my-file.ts
// index.ts
import "./foo.ts"; // ファイルが存在しない
// ファイル構成
└── index.ts
error TS2307: Cannot find module './foo.ts'.
foo.ts ファイルを作成します。
// my-file.ts
export default function myFunction2() {} // モジュールの名前が間違っている
// index.ts
import { myFunction } from "./my-file"; // モジュールの名前が間違っている
// ファイル構成
├── index.ts
└── src
└── my-file.ts
error TS2307: Cannot find module './my-file'.
モジュールの名前を myFunction2 に修正します。
// my-file.ts
export default function myFunction2() {} // モジュールの名前を修正
// index.ts
import { myFunction2 } from "./my-file"; // モジュールの名前を修正
// ファイル構成
├── index.ts
└── src
└── my-file.ts
// index.ts
import "@utils/my-file"; // ファイルエイリアスを使用
// ファイル構成
├── index.ts
└── tsconfig.json
// tsconfig.json
{
"compilerOptions": {
"rootDir": "./src",
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"] // 設定が間違っている
}
}
}
error TS2307: Cannot find module '@utils/my-file'.
paths 設定の @utils を ./src/utils に修正します。
{
"compilerOptions": {
"rootDir": "./src",
"baseUrl": "./",
"paths": {
"@/*": ["./src/*"] // 修正
}
}
}
これらのサンプルコードを参考に、TS2307 エラーの原因を特定し、解決してください。
ローカルファイルをインポートする他の方法
require 関数を使用する
CommonJS モジュールを使用している場合は、require 関数を使用してローカルファイルをインポートすることができます。
const myFile = require("./my-file.ts");
// myFile を使用
dynamic import を使用する
ES6 以降では、dynamic import を使用してローカルファイルをインポートすることができます。
const myFile = await import("./my-file.ts");
// myFile を使用
--outFile オプションを使用する
tsc --outFile index.js index.ts ./my-file.ts
この方法を使用すると、import ステートメントを使用する必要がなくなり、ファイルの読み込み速度を向上させることができます。
TypeScript モジュールローダーを使用すると、import ステートメントを使用してローカルファイルをインポートすることができます。
import { MyModule } from "./my-module";
// MyModule を使用
Node.js 環境では、module オブジェクトを使用してローカルファイルをインポートすることができます。
const myFile = require.resolve("./my-file.ts");
const myModule = require(myFile);
// myModule を使用
import ステートメント以外にも、ローカルファイルをインポートする方法はいくつかあります。それぞれの方法のメリットとデメリットを理解し、プロジェクトに適した方法を選択してください。
typescript
