エラー内容
ReactNativeのプロジェクトを作成する際、今はExpoが主流ですが現場などではNativeをカスタマイズしやすいCLIが使われているところもあります。
通常は
|
1 |
npx react-native init プロジェクト名 |
で新規プロジェクトを作成できていたのですが久しぶりに実行してみたら下記エラーがでるようになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
npm error code ERESOLVE npm error ERESOLVE could not resolve npm error npm error While resolving: undefined@undefined npm error Found: react-native@0.76.5 npm error node_modules/react-native npm error peer react-native@"*" from @react-native/virtualized-lists@0.76.5 npm error node_modules/@react-native/virtualized-lists npm error @react-native/virtualized-lists@"0.76.5" from react-native@0.76.5 npm error react-native@"0.79.1" from the root project npm error npm error Could not resolve dependency: npm error react-native@"0.79.1" from the root project npm error npm error Conflicting peer dependency: react@19.1.0 npm error node_modules/react npm error peer react@"^19.0.0" from react-native@0.79.1 npm error node_modules/react-native npm error react-native@"0.79.1" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error C:\Users\ken\AppData\Local\npm-cache\_logs\2025-04-28T06_10_36_493Z-eresolve-report.txt npm error A complete log of this run can be found in: C:\Users\User\AppData\Local\npm-cache\_logs\2025-04-28T06_10_36_493Z-debug-0.log |
依存関係で問題が発生しているようでした。
結論
先に結論からお伝えすると
|
1 |
npx @react-native-community/cli init |
を使ってプロジェクトを作成しよう
エラー原因
具体的に言うと、react-native とその依存関係（特に react）のバージョン間で矛盾が発生していることが原因です。
エラーメッセージから以下のことがわかります：
react-native@0.79.1とreact-native@0.76.5のバージョンの不一致- プロジェクトのルートで
react-native@0.79.1を使おうとしているのに、@react-native/virtualized-listsがreact-native@0.76.5を要求しているため、バージョンの不一致が発生しています。
- プロジェクトのルートで
react@19.1.0の依存関係の矛盾react-native@0.79.1はreact@"^19.0.0"を要求しており、そのバージョンと他の依存関係で使用されているバージョンが一致しないため、依存関係が解決できていません。
解決策
1～4はプロジェクト作成済みの場合、5～はinit時エラーの場合
1. --legacy-peer-deps オプションでインストールする
このエラーは、npmが依存関係の整合性を厳格にチェックしすぎていることが原因です。--legacy-peer-deps オプションを付けることで、npmが厳格な依存関係チェックをスキップし、インストールを強制することができます。
|
1 |
npm install --legacy-peer-deps |
|
1 |
これで依存関係の矛盾を無視してインストールが行われます。 |
2. --force オプションを使う
もし依存関係の矛盾が問題でない場合、--force オプションを使って強制的にインストールすることもできます。ただし、これにはリスクがあり、アプリが正常に動作しない場合もありますので注意が必要です。
|
1 |
npm install --force |
|
1 |
3. 依存関係のバージョンを調整
もし react-native@0.79.1 と react-native@0.76.5 のバージョンの不一致が問題であれば、次のようにバージョンを合わせる方法もあります：
package.jsonを確認して、react-nativeと@react-native/virtualized-listsのバージョンを一致させる。reactのバージョンも^19.0.0に合わせるか、または現在のプロジェクトに適したバージョンを選ぶ。
例えば、react-native@0.79.1 を使いたい場合は、次のようにします：
|
1 |
"react-native": "0.79.1" |
その後、依存関係を再インストールします。
|
1 |
npm install |
|
1 |
4. node_modules と package-lock.json を削除して再インストール
もし依存関係の解決に問題がある場合、node_modules フォルダと package-lock.json を削除してから再インストールを試みる方法もあります。
|
1 2 |
rm -rf node_modules package-lock.json // windowsは右クリックで削除 npm install |
これで、依存関係が一から再インストールされます。
5.react-native initの代替
参考：npx react-native init AwesomeProject fails #34968
v 068.2 と 0.69 を維持することは不可能ですか? ＃34051
5-1.C:\Users\<UserName>\AppData\Local\npm-cacheを削除
npm-cacheが何かはこちら
キャッシュを削除したあとに別の問題に遭遇しました。こちらの解決方法は別途記事にしたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported 🚨️ The `init` command is deprecated. - Switch to npx @react-native-community/cli init for the identical behavior. - Refer to the documentation for information about alternative tools: https://reactnative.dev/docs/getting-started Exiting... npm notice npm notice New major version of npm available! 10.8.2 -> 11.3.0 npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.3.0 npm notice To update run: npm install -g npm@11.3.0 npm notice |
5-1-1.npx @react-native-community/cli init AwesomeProjectを利用
Switch to npx @react-native-community/cli init for the identical behavior.から
npx @react-native-community/cli initを使えということがわかります。
5-1-2.その他
- いくつかのnpmパッケージが「非推奨（deprecated）」になっている警告
inflight@1.0.6：メモリリークするので使わない方がいい、と警告。rimraf@3.0.2：v4未満はサポート終了。glob@7.2.3：これもv9未満はサポート終了。
- 🚨
initコマンドが非推奨- これまでの
initコマンド（npx react-native init）は廃止予定になった。 - 代わりに
npx @react-native-community/cli initを使え、と公式から指示されている。 - 詳しくは公式ドキュメント（React Native Getting Started）
- これまでの
- npm自体のアップデート案内
- npmの新しいメジャーバージョン（v11.3.0）が出てるよ！
- 現在使っているnpmは 10.8.2。
- アップデートするなら bashコピーする編集する
npm install -g npm@11.3.0を実行してね、という案内。
コメント