webpack で「Module not found: Error: Can't resolve」が解決できない

要約

Module not found: Error: Can't resolve './foo' in '/path' は、webpack が import 先のモジュールを見つけられないときに出る。

パスの綴り、拡張子の解決（resolve.extensions）、エイリアス（resolve.alias）、依存の未インストールのいずれかが原因。
まず import 文のパスが実ファイルと一致しているかを確認する。

よくある原因

1. パス誤り: ファイル名や大文字小文字が違う。
   macOS/Windows は大小を無視するが、Linux や CI は区別するため、ローカルで通っても CI で落ちることがある。
2. 拡張子の解決: import x from "./x" のように拡張子を省いたが、その拡張子が resolve.extensions に無い。
3. alias 未設定: @/utils のような別名を書いたが、webpack 側に alias を定義していない。
4. 依存の未インストール: パッケージを入れておらず node_modules に無い。

解決策

1. パスと大文字小文字を合わせる

まず import 先の実ファイルを開き、パス・拡張子・大文字小文字を突き合わせる。
CI でだけ失敗する場合は大小の不一致をまず疑う。

2. resolve.extensions を設定する

// webpack.config.js
module.exports = {
  resolve: { extensions: [".js", ".jsx", ".ts", ".tsx"] },
};

省略したい拡張子を並べておくと、拡張子なしの import が解決できる。

3. alias を定義する

const path = require("path");
module.exports = {
  resolve: { alias: { "@": path.resolve(__dirname, "src") } },
};

TypeScript を併用するなら tsconfig の compilerOptions.paths とも一致させる。

4. 依存を入れる

npm install lodash

外部パッケージが原因なら install し、パッケージ名の綴りも確認する。