Expo GoからExpo development buildに移行したので、詰まったところを共有します

対象読者

• Expoのdevelopment buildを導入しようとしている方
• Expoのdevelopment buildで詰まっている方

環境

• Expo SDK: 50系
• React Native: 0.73系
• Expo Workflow: Managed Workflow

Expoのdevelopment buildとは？

React Native + Expoで構成されているアプリの場合、開発する際の動作確認やスタイリングの確認にはSimulatorかExpo Goを使用すると思います。
もし実機で確認したいとなるとExpo Goに限られるのですが、Expo SDK 50以降はSingle Version Supportになったため、最新版にアプデしなければExpo Goでは動作確認ができなくなりました。

そこで候補として上がるのが、development buildです。development buildは名前の通り「開発用にビルドされたアプリ」です。そのため、Expo Goと同じ感じで変更したら、その変更が反映されますし、Push通知なども来ます。これがメインのメリットではなく他にもメリットはありますので、詳しくは公式ドキュメントを読んでいただければと思います。

https://docs.expo.dev/develop/development-builds/create-a-build/

https://docs.expo.dev/develop/development-builds/introduction/

development build移行の際に詰まったとこ

1. そもそもbuildコマンドが実行されない！

起こったこと:　eas build --profile development --platform iosを実行すると、Cannot destructure property 'expoUsername' of 'undefined' as it is undefined.というエラーが出て、ビルドが失敗する

解決方法: このissueと起きている状況と同じだったため、コメントの内容を一つ一つ試していきました。弊社の環境でうまくいったのは、expo-updatesのバージョンを下げるというものでした(0.18.4に下げた)。正直このエラーとexpo-updatesがどう関係しているのかはわかっていないため、また何か分かり次第追記させていただきます。

2. React Native Firebaseでエラーが発生する

起こったこと:　eas build --profile development --platform iosを実行後、fastlane部分で画像のようなエラーが出る。

解決方法: build画面にPossible React Native Firebase configuration issueと書かれていた。弊社のアプリでは、React Native Firebaseを使用していなかったので削除し、再度ビルドを走らせたところエラーは解消した。参考までにExpoでReact Native Firebaseを使うためのドキュメントを貼っておきます。

https://rnfirebase.io/#expo

3. expo-dev-clientの依存関係ライブラリでのcannnot find interface declarationエラーの発生

起こったこと:　eas build --profile development --platform iosを実行すると、expo-dev-clientの依存関係先であるexpo-dev-menuやexpo-dev-launcherでcannot find interface declaration for 'RCTRootViewFactory'のようなエラーが起こり、ビルドが失敗する

解決方法: 色々試しましたがビルドが失敗を重ねたので、今までやったことを振り返ってみました。そうなるとexpo-updatesが怪しいと思えてきました。理由としては他にいじった部分がないこと、エラーが出ているファイルでExUpdatesというInterfaceが使われていたためです。最初に述べたようにexpo-updatesのversionを特定のバージョン以上にすると、ビルドが失敗します。そのため一旦npx expo install --checkで依存関係を整理してから、expo-updatesのバージョンを使用中のExpo SDKのバージョンと互換性のある依存関係のバージョンをインストールすると、1番のようなエラーは出なくなりました。

その後再度ビルドを走らせたところ、上記のcannot find interface declarationのエラーも発生することなく、ビルドが成功するようになりました。

注意: この方法で必ずうまくいくわけではなく、「どのライブラリのせいで、expo-updatesのエラーが出ていたのか？」「不要だったライブラリのアップデートはどれか？」など分かっていない部分もありますので、候補の一つとして考えてもらえればと思います。

4. 実機で読み取っても、アプリを開くことができない

起こったこと:　ビルド成功後、QRコードを実機で読み込み、アプリをインストールしても開くことができない。

解決方法: eas.jsonに環境ごとの設定を追加できると思うのですが、そこでsimulator: trueにしていることが原因でした。設定値の通りこれをtrueにすると、simulator用のdevelopment buildになってしまうので、これをfalseにするか、そもそも書かないようにすることで、実機でも開くことができるようになります。

以下のようにeas.jsonに新しいprofileを設定する方が良いかなと思います。

eas.json

 "development-device": {
      "distribution": "internal",
      "developmentClient": true
    }

おわりに

今回expoのdevelopment buildを導入した際の詰まったとこを紹介しました。弊社の環境のみ起こっている可能性もありますが、今後development buildを導入する際の助けとなればと思います。