できない.dev

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

import 先を webpack が解決できないと出る。
パスの綴り・大文字小文字、拡張子解決 (resolve.extensions)、alias 未設定、依存の未インストールのいずれかを疑う。

公開: 更新:

症状できない · exit 1
npx webpack --mode development --entry ./src/index.js
…
ERROR in ./src/index.js 1:19-44
Module not found: Error: Can't resolve './utils/Helper' in '/tmp/tmp.CZvnXPTr1k/src'
Did you mean './utils/helper.js'?
'helper.js' exists in that directory and differs from the request only in casing. Case-sensitive filesystems (most Linux ones) fail to resolve it, even when the same build succeeds on a case-insensitive one.
解決後できた · exit 0
node dist/main.js
helped

2026-09-05 に node:20（Node.js 20.20.2 / npm 10.8.2） で実際に打って取った出力。検証環境の詳細

要約

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

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

実行例

webpack 5.110.3 で試すと、大文字小文字だけが違う import は Did you mean './utils/helper.js'? という候補つきで失敗する。@/ を書いただけで resolve.alias を設定していない場合はパッケージ名とみなされ、node_modules を順に探した記録が並ぶ形になる。

$ npx webpack --mode development --entry ./src/index.js
asset main.js 2.62 KiB [emitted] (name: main)
./src/index.js 69 bytes [built] [code generated]
 
ERROR in ./src/index.js 1:19-44
Module not found: Error: Can't resolve './utils/Helper' in '/tmp/tmp.CZvnXPTr1k/src'
Did you mean './utils/helper.js'?
'helper.js' exists in that directory and differs from the request only in casing. Case-sensitive filesystems (most Linux ones) fail to resolve it, even when the same build succeeds on a case-insensitive one.
resolve './utils/Helper' in '/tmp/tmp.CZvnXPTr1k/src'
  using description file: /tmp/tmp.CZvnXPTr1k/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /tmp/tmp.CZvnXPTr1k/package.json (relative path: ./src/utils/Helper)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/tmp.CZvnXPTr1k/src/utils/Helper doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/tmp.CZvnXPTr1k/src/utils/Helper.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/tmp.CZvnXPTr1k/src/utils/Helper.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /tmp/tmp.CZvnXPTr1k/src/utils/Helper.wasm doesn't exist
      as directory
        /tmp/tmp.CZvnXPTr1k/src/utils/Helper doesn't exist
 
webpack 5.110.3 compiled with 1 error in 58 ms
$ echo $?
1
$ npx webpack --mode development --entry ./src/index.js
asset main.js 2.62 KiB [emitted] [compared for emit] (name: main)
./src/index.js 69 bytes [built] [code generated]
 
ERROR in ./src/index.js 1:19-44
Module not found: Error: Can't resolve '@/utils/helper' in '/tmp/tmp.CZvnXPTr1k/src'
resolve '@/utils/helper' in '/tmp/tmp.CZvnXPTr1k/src'
  Parsed request is a module
  using description file: /tmp/tmp.CZvnXPTr1k/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /tmp/tmp.CZvnXPTr1k/src/node_modules doesn't exist or is not a directory
      looking for modules in /tmp/tmp.CZvnXPTr1k/node_modules
        /tmp/tmp.CZvnXPTr1k/node_modules/@/utils doesn't exist
      /tmp/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 
webpack 5.110.3 compiled with 1 error in 60 ms
$ echo $?
1
$ npx webpack
asset main.js 2.79 KiB [emitted] (name: main)
./src/index.js 69 bytes [built] [code generated]
./src/utils/helper.js 40 bytes [built] [code generated]
webpack 5.110.3 compiled successfully in 63 ms
$ echo $?
0
$ node dist/main.js
helped
$ echo $?
0

— 2026-09-05 時点の出力

検証環境Node.js 20.20.2 / npm 10.8.2 / Python 3.11.2 / 2026-09-05 検証（ほか 1 件）
検証日
実行環境
node:20 Debian GNU/Linux 12 (bookworm)
バージョン
  • Node.js 20.20.2
  • npm 10.8.2
  • Python 3.11.2
  • Git 2.39.5

この記事の「実行例」は、上記の環境で実際にコマンドを実行して得られた出力をそのまま掲載しています。 再現手順はリポジトリの検証スクリプトとして管理し、定期的に再実行して出力を更新しています。

解決策

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 し、パッケージ名の綴りも確認する。

よくある原因

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

この手順で直った？