Unable to resolve module の原因と解決策

概要

Unable to resolve module は、React NativeのMetro BundlerがJavaScriptモジュールを見つけられない場合に発生するエラーです。

エラーメッセージ

error: Error: Unable to resolve module `./components/Header` from `/app/src/App.js`:

None of these files exist:
  * components/Header(.native|.ios.js|.native.js|.js|.jsx|.json|.ts|.tsx)
  * components/Header/index(.native|.ios.js|.native.js|.js|.jsx|.json|.ts|.tsx)

error: Error: Unable to resolve module `react-native-vector-icons` from `App.js`

原因

1. ファイルパスが間違っている

1
2
3
4
5
// NG: 存在しないパス
import Header from './components/Header';

// OK: 正しいパス
import Header from './src/components/Header';

2. パッケージがインストールされていない

1
2
import Icon from 'react-native-vector-icons/FontAwesome';
// パッケージがnode_modulesに存在しない

3. Metro Bundlerのキャッシュ

キャッシュが古いまま残っている場合があります。

4. node_modulesの不整合

インストールが不完全な場合があります。

解決策

1. Metro Bundlerのキャッシュをクリア

1
2
3
4
5
# キャッシュをクリアして再起動
npx react-native start --reset-cache

# または
npm start -- --reset-cache

2. node_modulesを再インストール

1
2
3
4
5
rm -rf node_modules
rm package-lock.json  # または yarn.lock
npm install
# または
yarn install

3. iOSのPodsを再インストール

1
2
3
4
cd ios
rm -rf Pods Podfile.lock
pod install
cd ..

4. watchmanをクリア（macOS）

1
watchman watch-del-all

5. ファイルパスの確認

1
2
3
// 大文字小文字に注意（特にmacOSからLinuxへデプロイ時）
import Header from './components/header'; // NG: 大文字小文字が違う
import Header from './components/Header'; // OK

6. パッケージのリンク（React Native < 0.60）

1
2
# 古いReact Nativeの場合
react-native link react-native-vector-icons

7. metro.config.jsの確認

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
// metro.config.js
const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts },
  } = await getDefaultConfig();

  return {
    resolver: {
      sourceExts: [...sourceExts, 'cjs'],
    },
  };
})();

完全リセット手順

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
# 1. キャッシュ削除
watchman watch-del-all
rm -rf node_modules
rm -rf $TMPDIR/react-*
rm -rf $TMPDIR/metro-*
rm -rf $TMPDIR/haste-*

# 2. iOS Pods削除
cd ios && rm -rf Pods Podfile.lock && cd ..

# 3. Android build削除
cd android && ./gradlew clean && cd ..

# 4. 再インストール
npm install
cd ios && pod install && cd ..

# 5. 再起動
npx react-native start --reset-cache

Unable to resolve module

概要

エラーメッセージ

原因

1. ファイルパスが間違っている

2. パッケージがインストールされていない

3. Metro Bundlerのキャッシュ

4. node_modulesの不整合

解決策

1. Metro Bundlerのキャッシュをクリア

2. node_modulesを再インストール

3. iOSのPodsを再インストール

4. watchmanをクリア（macOS）

5. ファイルパスの確認

6. パッケージのリンク（React Native < 0.60）

7. metro.config.jsの確認

完全リセット手順

関連エラー

関連エラー