Rork アプリの Expo 依存関係エラー解決ガイド
RorkでReact Native / Expoアプリを生成した直後や、プロジェクトをセットアップする過程で、「Invariant Violation」「Module not found」といった依存関係エラーに遭遇することがあります。これらのエラーは、Rorkが生成したコードと実際にインストールされたExpo SDKのバージョンが不整合になることが主な原因です。
Expo 依存関係エラーが発生する仕組み
RorkコードとExpo SDKのバージョン不整合
Rorkが生成するアプリは、生成時点での最新Expo SDKを想定してコードを出力します。しかし以下のような場合、実際にインストールされるSDKバージョンがズレてしまいます。
- 古いnode_modulesの再利用 — 前のプロジェクトのnode_modulesをコピーした
- package.json の厳密なバージョン指定 — キャレット(
^)やティルダ(~)の記号でバージョンが自動更新される - Expoアップグレード環境 — プロジェクトをExpo v48から v50にアップグレードした途中で止まっている
- ローカル npm/yarn キャッシュの古さ — npm キャッシュに古いバージョンが残っている
Expoでは、各メジャーバージョン(v48, v49, v50...)でAPIや内部実装が大きく変わるため、バージョンの1段階の違いでもランタイムエラーが発生します。
よくあるエラーメッセージと原因
| エラーメッセージ | 原因 | カテゴリ |
|---|---|---|
Invariant Violation: Native module does not exist | SDK内のネイティブモジュールが見つからない | バージョン不整合 |
Module not found: Can't resolve '@react-native/...' | React Native のコアライブラリがインストールされていない | 不完全なインストール |
YellowBox: Tried to register two views with the same name | 複数バージョンのコンポーネントライブラリが共存 | バージョン重複 |
Unable to resolve module: Navigation is not a function | Expo Router のバージョンが古い | 依存関係ズレ |
Error: EACCES: permission denied | node_modulesのパーミッションエラー(Macで多発) | インストール権限 |
これらはすべて、正しいバージョンをインストールし直すことで解決できます。
解決方法 Step 1: package.json のバージョンを確認・固定する
Rorkが生成した package.json には、推奨されるExpo SDKバージョンが記述されています。まずはこれを確認しましょう。
{
"dependencies": {
"expo": "^52.0.0",
"react": "18.3.1",
"react-native": "0.76.1",
"expo-router": "^3.7.0"
}
}ここで重要なのは、キャレット(^)の存在です。
^52.0.0→ 52.0.0 以上 53.0.0 未満のいずれかがインストールされる(不安定)52.0.0→ 正確に 52.0.0 のみがインストールされる(推奨)
推奨対応: Rorkが指定したバージョンをキャレットなしで固定してください。
{
"dependencies": {
"expo": "52.0.0",
"react": "18.3.1",
"react-native": "0.76.1",
"expo-router": "3.7.0"
}
}変更後は、以下のコマンドで確認します:
npm install --checkこのコマンドは、package.json と実際にインストールされているバージョンを検証します。
解決方法 Step 2: node_modules を完全に削除してクリーンインストール
キャレット記号を修正したら、次は node_modules ディレクトリを完全に削除して、クリーンインストールを実行します。
# 1. node_modules とロックファイルを削除
rm -rf node_modules
rm -rf package-lock.json
# 2. クリーンキャッシュ削除(重要!)
npm cache clean --force
# 3. 改めてインストール
npm installポイント:
npm cache clean --forceを必ず実行してください。npmのローカルキャッシュに古いバージョンが残っていると、そこから再インストールされてしまいます- Yarnを使う場合は
yarn cache clean && yarn install
解決方法 Step 3: Expo の互換性チェックと自動修復
Expoは、インストール後に互換性チェックを行うコマンドを提供しています:
npx expo install --check実行結果の例:
Checking compatible versions for Expo SDK 52...
✓ expo@52.0.0 is installed
✓ react@18.3.1 is installed
✗ react-native@0.75.1 (expected 0.76.1)
→ Run: npm install react-native@0.76.1
Mismatches found. Running auto-fix...
エラーが検出された場合は、さらに以下を実行します:
npx expo install --fixこのコマンドは、Expo SDKと互換性のあるすべての依存関係を自動的に調整します。
Expo SDK アップグレード時の注意点
既存プロジェクトをExpo v50からv52にアップグレードするような場合、以下の手順を守ってください:
アップグレード前のチェックリスト
- バックアップを取る —
git commitして変更を保存 - ローカルで十分にテストする — 本番デプロイ前に iOS / Android 両方で動作確認
- リリースノートを読む — Expo GitHub のchangelog で破壊的変更(Breaking Changes)を確認
アップグレード手順
# 1. Expo と関連パッケージをアップグレード
npm install expo@latest
npx expo install --fix
# 2. Expo CLI もアップグレード
npm install --global expo-cli@latest
# 3. ローカルで EAS Build でテスト(本番デプロイの前に)
eas build --platform ios --local
eas build --platform android --localよくあるアップグレードエラー
エラー: react-native has peer dependency issues
原因: React Native のメジャーバージョン更新後、既存コードが古いAPI を呼び出している
対処: npx expo install --fix を複数回実行。それでも解決しない場合は、Rorkで該当コンポーネント/ページを再生成させます。
Rork の "Fix Now" 機能を活用した自動修復
Rorkで生成したアプリでエラーが出た場合、Rorkのダッシュボードに「Fix Now」というボタンがあります。このボタンを押すと:
- RorkがEOL(End of Life)されていないコンポーネントの互換性を自動チェック
- 問題があれば、修正済みコードを生成
- 修正内容をプレビューしてから、プロジェクトに適用
このため、複雑なバージョン問題の場合は、まずRorkの自動修復を試してみてください。
参考資料・関連ガイド
依存関係エラーが解決したら、次は Expo Router ナビゲーションガイド でアーキテクチャを深掘りするのがおすすめです。また、ランタイムエラーについては React Native Expo ランタイムエラー修正ガイド を参考にしてください。
より詳しい技術仕様については、React Native Expo アーキテクチャ ガイドもあわせてご覧ください。
Rorkでの開発がより快適になることを願っています。困ったときはいつでも戻ってきてくださいね。
参考書籍:
- Expo公式ドキュメント — 最新のAPIリファレンスと更新情報