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

概要

Module not found: Can't resolve は、WebpackやViteなどのバンドラーがimport文で指定されたモジュールを見つけられない場合に発生するビルドエラーです。パッケージの未インストール、パスの記述ミス、エイリアス設定の不足が主な原因です。

エラーメッセージ

Module not found: Can't resolve 'axios' in '/project/src'

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

Module not found: Can't resolve '@/utils/helpers' in '/project/src/components'

原因

パッケージが未インストール: npm installされていない依存パッケージをimportしている
パスの記述ミス: ファイルパスのタイプミスや大文字小文字の不一致
パスエイリアスの未設定: @/ などのエイリアスがバンドラーに設定されていない
拡張子の省略: Webpackの設定でresolve.extensionsが不足
node_modulesの破損: パッケージのインストールが不完全

解決策

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
# npmの場合
npm install axios

# yarnの場合
yarn add axios

# pnpmの場合
pnpm add axios

# 型定義パッケージが必要な場合（TypeScript）
npm install --save-dev @types/lodash

2. ファイルパスを修正する

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
// ❌ パスが間違っている
import Header from "./components/header"; // 大文字小文字の不一致（macOSでは動くがLinuxでエラー）

// ✅ 正しいパス
import Header from "./components/Header";

// ❌ 拡張子の問題
import config from "./config"; // .tsや.jsonが解決されない場合

// ✅ 拡張子を明示
import config from "./config.json";

3. Webpackのresolve設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// webpack.config.js
const path = require("path");

module.exports = {
  resolve: {
    // 省略可能な拡張子
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],

    // パスエイリアス
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@components": path.resolve(__dirname, "src/components"),
      "@utils": path.resolve(__dirname, "src/utils"),
    },
  },
};

4. TypeScriptのpaths設定（tsconfig.json）

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

1
2
3
// tsconfig.jsonのpathsを設定後に使用可能
import Header from "@/components/Header";
import { formatDate } from "@utils/helpers";

5. Viteのresolve設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// vite.config.ts
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
    extensions: [".ts", ".tsx", ".js", ".jsx"],
  },
});

6. node_modulesを再インストール

1
2
3
4
5
# node_modulesとロックファイルを削除して再インストール
rm -rf node_modules
rm package-lock.json  # またはyarn.lock / pnpm-lock.yaml

npm install

Module not found: Can't resolve

概要

エラーメッセージ

原因

解決策

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

2. ファイルパスを修正する

3. Webpackのresolve設定

4. TypeScriptのpaths設定（tsconfig.json）

5. Viteのresolve設定

6. node_modulesを再インストール

関連エラー

JavaScript の他のエラー