Module not found: Can't resolve の原因と解決策

概要

Webpackがimportやrequireで指定されたモジュールを解決できない場合に発生するエラーです。

エラーメッセージ

Module not found: Error: Can't resolve 'lodash' in '/path/to/project/src'
Module not found: Error: Can't resolve './components/Header' in '/path/to/project/src'

原因

パッケージ未インストール: npm installされていない
パスの間違い: 相対パスやファイル名の誤り
拡張子の省略: .jsや.tsxが必要な場合
エイリアスの設定ミス: webpack.configの設定誤り

解決策

1. パッケージをインストール

1
2
3
npm install lodash
# または
yarn add lodash

2. パスを確認・修正

1
2
3
4
5
// 悪い例
import Header from './components/header';  // 大文字小文字の違い

// 良い例
import Header from './components/Header';

3. resolve.extensionsを設定

1
2
3
4
5
6
// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
  }
};

4. エイリアスを設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// webpack.config.js
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@components': path.resolve(__dirname, 'src/components')
    }
  }
};

1
2
// 使用例
import Header from '@components/Header';

5. TypeScriptのpathsと同期

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

6. node_modulesを再インストール

1
2
rm -rf node_modules package-lock.json
npm install

概要

エラーメッセージ

原因

解決策

1. パッケージをインストール

2. パスを確認・修正

3. resolve.extensionsを設定

4. エイリアスを設定

5. TypeScriptのpathsと同期

6. node_modulesを再インストール

JavaScript の他のエラー