開発環境
- OS：Windows11 Home
- フレームワーク：React Native（Expo）
- 実行環境：Node.js
- 開発エディタ：VSCode
- リリース元：Google Play（Androidスマホアプリ）
経緯の概要
Expo SDK を54に上げてビルドしたときに react-native-safe-area-context と React Native Elements（RNE）の依存関係でハマり、最終的に --legacy-peer-deps オプションで回避しました。
この記事では、その原因と解決までの流れを記録します。
1. Expo SDKを54にアップデート
例によって Google Play Console から公開アプリを Android の最新バージョンに対応させるようにとの通知が来ていたので、Expo SDK のバージョンアップをしました。
npm install expo@^54.0.0
合わせて依存ライブラリもバージョンアップします。
npx expo install --fix
Expo SDK 54 は React Native 0.75 系に基づいており、
その互換ライブラリ群の中で react-native-safe-area-context@^5.0.0 が必須になっています。
そして、React Native Elements（RNE）を使用している場合、react-native-safe-area-context との依存関係があり、同じようにバージョンアップする必要があります。
2. react-native-safe-area-contex tの要求に合わせて RNE の最新バージョンを入れるとビルドエラーになる
RNE は @rneui/base と @rneui/themed のパッケージがあるので、両方とも最新バージョンにアップデートし、ビルドすると、エラーになってしまいました。
エラー内容を見ると、「@rneui/themed が要求する @rneui/base のバージョンと実際の @rneui/base のバージョンが合っていない」ということでした。
3. react-native-safe-area-context と RNE のライブラリのバージョン依存関係沼にハマる
ここで react-native-safe-area-context と RNE とのバージョン依存関係が問題になります。
RNE には @rneui/base と @rneui/themed のパッケージがあり、依存関係は下記の表のようになります。
| ライブラリ | Expo SDK 54 環境で必要なバージョン |
|---|---|
| react-native-safe-area-context | 5.x |
| @rneui/base | 4.0.0-rc.8（safe-area-context v5.x に対応） |
| @rneui/themed | 4.0.0-rc.8（@rneui/base v4.0.0-rc.7 に依存） |
4. どないせーちゅーねん
つまり、問題のポイントはこうです。
- Expo SDK 54 では react-native-safe-area-context v5.x が必須になります。
- 一方で、RNE の @rneui/base v4.0.0-rc.7 はこのバージョンに未対応です。
- そのため、@rneui/base を rc.8 に上げる必要がありますが、@rneui/themed v4.0.0-rc.8 がまだ rc.7 に依存しているため、npm の依存関係チェック（peerDependencies）に引っかかります。
- 結果として、「Expo SDK に合わせれば RNE が壊れ、RNE に合わせれば Expo が壊れる」という状況が発生します。
npm v7 から仕様が変わり、peerDependencies の不整合があるとインストールを中断し、エラーにする、つまり、バージョンが少しでも違うと ERESOLVE エラーが出るようになりました。
peerDependencies は、「このライブラリを使うなら、特定の別ライブラリのバージョンを一緒に使ってね」という “依存条件” を示す仕組みです。
これにより、古いライブラリやまだ v7 対応していないライブラリを使うと簡単にビルドが止まるようになりました。
5. npm v6 以前の方式で peerDependencies を処理する
この問題を解決するため、 --legacy-peer-deps オプションを追加することでビルドの際に依存関係を厳密にチェックしてしまう仕様を止めることにします。
具体的には eas.json に下記の記述（"env": ...）を加えました。
"NPM_FLAGS": "--legacy-peer-deps" という書き方も試したけど通りませんでした。
"production": {
"autoIncrement": true,
"env": {
"NPM_CONFIG_LEGACY_PEER_DEPS": "true"
}
}
ただし、整合性に問題があるとアプリの動作に影響があるかもしれないので、むやみにやると良くないです。影響をよく確認してから適用するようにしてください。
参照ページ