Open20

Expo SDKアップデート（47→48）の備忘録

Ren SuyamaRen Suyama

概要

公式のExpo SDK48に記載のアップデート手順を参考に各ライブラリのバージョンアップを対応していきます。

筆者自身の脳内を整理するために記載しているものであって、もし誰か他の方も衝突することがあればと思い記載してます。

Ren SuyamaRen Suyama

1. npm i -g eas-cli

概要

  • eas-cliのバージョンを上げていく

対応内容

  • Before：
    • グローバルにeas-cliが入ってなかった
  • After：
    • npm list -g eas-cli でバージョン確認
    • 出力結果：eas-cli@5.2.0
Ren SuyamaRen Suyama

2. npm install expo@^48.0.0

概要

  • Expo SDKのライブラリのバージョンを47から48に上げる

対応内容

  • Before：
    • "expo": "47.0.0",
  • After：
    • "expo": "48.0.20"
Ren SuyamaRen Suyama

3. npx expo install --fix

概要

  • SDK48に紐づいた各ライブラリを整理してインストール

対応内容

Ren SuyamaRen Suyama

4. npm install expo@48.0.6

概要

  • npx expo install --fixを実行するためにはexpoのバージョンをv48.0.6にダウングレードしないといけない

対応内容

  • npm install expo@48.0.6を実行すると下記エラーが発生
***@***-MacBook-Pro expo % npm install expo@48.0.6
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @react-navigation/material-top-tabs@6.6.3
npm ERR! Found: react-native-tab-view@2.16.0
npm ERR! node_modules/react-native-tab-view
npm ERR!   react-native-tab-view@"2.16.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native-tab-view@">= 3.0.0" from @react-navigation/material-top-tabs@6.6.3
npm ERR! node_modules/@react-navigation/material-top-tabs
npm ERR!   @react-navigation/material-top-tabs@"6.6.3" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react-native-tab-view@3.5.2
npm ERR! node_modules/react-native-tab-view
npm ERR!   peer react-native-tab-view@">= 3.0.0" from @react-navigation/material-top-tabs@6.6.3
npm ERR!   node_modules/@react-navigation/material-top-tabs
npm ERR!     @react-navigation/material-top-tabs@"6.6.3" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/***/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
  • @react-navigation/material-top-tabs と react-native-tab-view のバージョンを共存可能なものにアップデートする必要があるので、以下を対応
npm install @react-navigation/material-top-tabs@latest
npm install react-native-tab-view@latest
  • 再度npm install expo@48.0.6を実行
    • 無事、パッチバージョンをダウングレードできたことを確認 🙌
    • "expo": "48.0.6",
Ren SuyamaRen Suyama

5. npx expo install --fix（再トライ）

  • 概要

    • 前回までの説明として、expo公式によるとexpoバージョンが48系の時にnpx expo install --fixを叩くためには、48.0.6`以下にしないといけないためダウングレードした
    • "expo": "48.0.6",となったので、再度npx expo install --fixを実行する

  • 対応内容

    • npx expo install --fix
      • 再度エラーが発生。。。
    • エラー内容：Invalid NODE_ENV or APP_ALIAS
      • これはコード内で用意してる条件分岐に引っかかっただけなので、NODE_ENV=*** APP_ALIAS=***をコマンドの先頭に設定
    • NODE_ENV=*** APP_ALIAS=*** npx expo install --fix（3度目の正直）
      • 成功 🙌
      • added 398 packages, removed 118 packages, changed 144 packages, and audited 2237 packages in 45s
Ren SuyamaRen Suyama

6. expo-cliからの脱却

概要

  • Expo SDK48の公式によるとexpo-cliを脱却して、expo/cliを使用するようにと記載がある
Note: if you have expo-cli installed to your project dependencies, you will need to remove it! As of SDK 46, the CLI is now part of the expo package, and having the old expo-cli package installed may cause issues such as “error: unknown option --fix’” when running npx expo install --fix.
  • 私のプロジェクトではexpo-cliでexpo-cli publishを行なっているので、コマンドライン上でexpo-cliを使用しない書き方を模索する
  • Expo DevelopersというExpo開発者用のDiscordにも以下の通り記載があった
    • expo publishに不具合があるらしく、eas updateを代わりに使うよう記載がある
Hello,

We are trying to run our expo publish cli command to fix an issue in production in our app, and we are getting the following error:

expo publish is not supported in the local CLI, please use eas update instead

I know we need to start using eas update, since expo publish will sunset this year, but this is in progress here in our team.

Thanks for the support!
  • Expo Developersで問い合わせてみると、Expo開発者から返信があった
    • やはり expo-cli publish や expo publishは Classic Updatesと呼ばれているもので、Expo SDK 50に上げる前に（Expo SDK 49の内に）は EAS Updateを使用するようにとのこと

対応方針

Ren SuyamaRen Suyama

7. npx expo-doctor

概要

  • expo: 48.0.6 にアップグレードしたことで、依存していたライブラリに不整合があるかチェック

対応方法

  • npx expo-doctorを実行
    • エラーが出た箇所を1つずつ潰していく
Need to install the following packages:
  expo-doctor@1.1.3
Ok to proceed? (y) y

✖ Check Expo config for common issues
✖ Check package.json for common issues
✖ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✖ Check Expo config (app.json/ app.config.js) schema
Unexpected error while running 'Check Expo config (app.json/ app.config.js) schema' check:
TypeError: Cannot read properties of undefined (reading 'schema')
✔ Check that native modules use compatible support package versions for installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✖ Check that packages match versions required by installed Expo SDK

Detailed check results:

Unable to reach Expo servers. Falling back to using the cached dependency map (bundledNativeModules.json) from the package "expo" installed in your project.
Some dependencies are incompatible with the installed expo version:
  expo-build-properties@0.6.0 - expected version: ~0.5.1
  react-native@0.71.8 - expected version: 0.71.3
Your project may not work correctly until you install the correct versions of the packages.
Install individual packages by running npx expo install expo-build-properties@~0.5.1 react-native@0.71.3
Found outdated dependencies
Advice: Use 'npx expo install --check' to review and upgrade your dependencies.

It appears that expo.sdkVersion is defined in your app.json/ app.config.js. This can cause 'expo install' to install dependency versions for the wrong SDK. SDK version is determined by the version of the expo package installed in your project.
Advice: Remove expo.sdkVersion from your app.json/ app.config.js.

The package  "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.

The following scripts in package.json conflict with the contents of node_modules/.bin: eas, eslint, jest, patch-package.

One or more checks failed, indicating possible issues with the project.
  • npx expo install expo-build-properties@0.5.1 react-native@0.71.3を実行
    • expo-build-properties
      • Before: ~0.6.0
      • After: 0.5.1
    • react-native
      • Before: 0.70.5
      • After: 0.71.3
  • ts-jestの依存関係でエラーが発生
    • npx expo install --fixした際にjestのバージョンが上がっていて、jestに依存関係を持つts-jestのバージョンが追いついてないとのこと
    • jest: "29.2.1"は最新のバージョンに当たるから、ts-jestのバージョンも最新まで持ってこようと思う
Unable to reach Expo servers. Falling back to using the cached dependency map (bundledNativeModules.json) from the package "expo" installed in your project.
› Installing 2 SDK 48.0.6 compatible native modules using npm
> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: ts-jest@26.4.1
npm ERR! Found: jest@29.7.0
npm ERR! node_modules/jest
npm ERR!   jest@"^29.2.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jest@">=26 <27" from ts-jest@26.4.1
npm ERR! node_modules/ts-jest
npm ERR!   ts-jest@"26.4.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: jest@26.6.3
npm ERR! node_modules/jest
npm ERR!   peer jest@">=26 <27" from ts-jest@26.4.1
npm ERR!   node_modules/ts-jest
npm ERR!     ts-jest@"26.4.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/***/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/***/.npm/_logs/2023-09-28T02_57_00_991Z-debug-0.log
Error: npm exited with non-zero code: 1
Error: npm exited with non-zero code: 1
    at ChildProcess.completionListener (/Users/***/Develop/***/expo/node_modules/@expo/cli/node_modules/@expo/spawn-async/build/spawnAsync.js:52:23)
    at Object.onceWrapper (node:events:629:26)
    at ChildProcess.emit (node:events:514:28)
    at maybeClose (node:internal/child_process:1091:16)
    at ChildProcess._handle.onexit (node:internal/child_process:302:5)
    ...
    at spawnAsync (/Users/***/Develop/***/expo/node_modules/@expo/cli/node_modules/@expo/spawn-async/build/spawnAsync.js:17:21)
    at NpmPackageManager.runAsync (/Users/***/Develop/***/expo/node_modules/@expo/cli/node_modules/@expo/package-manager/build/node/BasePackageManager.js:38:42)
    at /Users/***/Develop/***/expo/node_modules/@expo/cli/node_modules/@expo/package-manager/build/node/NpmPackageManager.js:38:20
    at /Users/***/Develop/***/expo/node_modules/@expo/cli/node_modules/@expo/package-manager/build/utils/spawn.js:19:34
  • npm install ts-jest@latest
    • 成功
      • Before: "ts-node": "10.8.2"
      • After: "ts-jest": "29.1.1"
  • 先ほど失敗した npx expo install expo-build-properties@0.5.1 react-native@0.71.3を再度実行
    • 成功
      • いくつかのpackage-jsonのライブラリのバージョンに~が付きますが、外しておきます
      • ~が付いてると、それ以降のバージョンに自動で上がることを許容してしまいます
      • 参考記事
Ren SuyamaRen Suyama

8. npx expo-doctor（2回目）

概要

  • 7. npx expo-doctorで出てたエラーを解消したので、再度実行

対応方法

  • npx expo-doctor
    • 下記エラーが出てきた
    • ✔ Check that packages match versions required by installed Expo SDKの項目が7. npx expo-doctorでは✖だったが、解消されてた
✖ Check Expo config for common issues
✖ Check package.json for common issues
✖ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✖ Check Expo config (app.json/ app.config.js) schema
Unexpected error while running 'Check Expo config (app.json/ app.config.js) schema' check:
TypeError: Cannot read properties of undefined (reading 'schema')
✔ Check that native modules use compatible support package versions for installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that packages match versions required by installed Expo SDK

Detailed check results:

It appears that expo.sdkVersion is defined in your app.json/ app.config.js. This can cause 'expo install' to install dependency versions for the wrong SDK. SDK version is determined by the version of the expo package installed in your project.
Advice: Remove expo.sdkVersion from your app.json/ app.config.js.

The package  "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.

The following scripts in package.json conflict with the contents of node_modules/.bin: eas, eslint, jest, patch-package.

One or more checks failed, indicating possible issues with the project.
  • 次の3つのスレッドで、Detailed check results:に記載された3箇所のエラーを1つずつ潰していく
Detailed check results:

It appears that expo.sdkVersion is defined in your app.json/ app.config.js. This can cause 'expo install' to install dependency versions for the wrong SDK. SDK version is determined by the version of the expo package installed in your project.
Advice: Remove expo.sdkVersion from your app.json/ app.config.js.

The package  "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.

The following scripts in package.json conflict with the contents of node_modules/.bin: eas, eslint, jest, patch-package.

One or more checks failed, indicating possible issues with the project.
  • 1つ目を見ると、expoコマンドを使わないようにと記載があるので、eas updateに先に切り替えた方がよさそう
Ren SuyamaRen Suyama

9. Remove expo.sdkVersion from your app.json/ app.config.js

概要

  • app.config.tsにsdkVersionを読み込んでる箇所があったので、無くす

対応方法

  • expo SDKのバージョンを設定しているjsonファイルからsdkVersionを削除
Ren SuyamaRen Suyama

10. Fix command from expo-cli publish → eas update

概要

  • npm run publishというコマンドを叩く際、prefixにDev、Stg、Prdを添えることで、環境に応じたexpoのリリースを弊社では行なっている
  • その際、npm run publishが特定のファイルを実行していて、そのファイルでexpo-cli publishを実行している
  • そこのコマンドをeas updateを使用するようファイルを修正

対応方法

Before

  const { error } = spawnSync('expo-cli', ['publish', '-c', '--release-channel', releaseChannel], {
    encoding: 'utf8',
    stdio: 'inherit',
  });

After

  const { error } = spawnSync('eas', ['update', '-channel', releaseChannel], {
    encoding: 'utf8',
    stdio: 'inherit',
  });
Ren SuyamaRen Suyama

11. npx expo-doctor（3回目）

概要

  • sdkVersionを設定ファイルから消したことでどういう影響があるか確認

対応方法

  • npx expo-doctor
    • いくつか ✖ だったものが ✔ になりつつ、 ✔ だったものが ✖ に変わった
✔ Check Expo config for common issues
✖ Check package.json for common issues
✖ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✖ Check that packages match versions required by installed Expo SDK
✖ Check that native modules use compatible support package versions for installed Expo SDK

Detailed check results:

Expected package @expo/config-plugins@~6.0.0
Found invalid:
  @expo/config-plugins@5.0.4
  @expo/config-plugins@4.1.5
  (for more info, run: npm why @expo/config-plugins)
Expected package @expo/prebuild-config@~6.0.0
Found invalid:
  @expo/prebuild-config@5.0.7
  (for more info, run: npm why @expo/prebuild-config)
Advice: Upgrade dependencies that are using the invalid package versions.

Some dependencies are incompatible with the installed expo version:
  expo-build-properties@0.5.2 - expected version: ~0.6.0
  react-native@0.71.3 - expected version: 0.71.8
Your project may not work correctly until you install the correct versions of the packages.
Install individual packages by running npx expo install expo-build-properties@~0.6.0 react-native@0.71.8
Found outdated dependencies
Advice: Use 'npx expo install --check' to review and upgrade your dependencies.

The package  "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.

The following scripts in package.json conflict with the contents of node_modules/.bin: eas, eslint, jest, patch-package.

One or more checks failed, indicating possible issues with the project.
  • npx expo install expo-build-properties@0.6.0 react-native@0.71.8を実行
    • expo-build-properties
      • Before: 0.5.1
      • After: 0.6.0
    • react-native
      • Before: 0.71.3
      • After: 0.71.8
    • 成功
Ren SuyamaRen Suyama

12. npx expo-doctor（4回目）

概要

  • expo-build-properties@0.6.0 と react-native@0.71.8を入れたことで、ライブラリにどういう影響が出てか確認

対応方法

  • npx expo-doctor実行
    • ✖ Check that packages match versions required by installed Expo SDK が ✔ に変わった
✔ Check Expo config for common issues
✖ Check package.json for common issues
✖ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that packages match versions required by installed Expo SDK
✖ Check that native modules use compatible support package versions for installed Expo SDK

Detailed check results:

Expected package @expo/config-plugins@~6.0.0
Found invalid:
  @expo/config-plugins@5.0.4
  @expo/config-plugins@4.1.5
  (for more info, run: npm why @expo/config-plugins)
Expected package @expo/prebuild-config@~6.0.0
Found invalid:
  @expo/prebuild-config@5.0.7
  (for more info, run: npm why @expo/prebuild-config)
Advice: Upgrade dependencies that are using the invalid package versions.

The package  "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.

The following scripts in package.json conflict with the contents of node_modules/.bin: eas, eslint, jest, patch-package.

One or more checks failed, indicating possible issues with the project.
  • @expo/config-pluginsと@expo/prebuild-configのバージョンが生合成取れてなかったので、どう整合性取れてないのか確認する
    • npm why @expo/config-plugins
      • @expo/config-plugins@"~6.0.0" from @expo/prebuild-config@6.0.0 などが表示された
    • npm why @expo/prebuild-config
      • @expo/prebuild-config@"6.0.0" from @expo/cli@0.6.2 などが表示された
  • 上記からpackage.jsonで@expo/config-plugins@"6.0.0と@expo/prebuild-config@"6.0.0を指定した
"dependencies": {
    "@expo/config-plugins": "6.0.0",
    "@expo/prebuild-config": "6.0.0",
...
}
  • npm installを実行
    • 成功
Ren SuyamaRen Suyama

13. The package "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.

概要

  • React-Native 0.71から@typesを含むようになったので@types/react-nativeをpackage.jsonから削除する

対応方法

  • tsconfig.jsonに下記設定を行う
{
  "compilerOptions": {
    "types": ["react-native"]
  }
}

  • package.jsonから@types/react-nativeを削除する

    • npm uninstall @types/react-nativeを実行

  • npx expo-doctor実行

    • The package "@types/react-native" should not be installed directly in your project, as types are included with the "react-native" package.が消えた 🙌
Ren SuyamaRen Suyama

14. @expo/config-plugins と @expo/prebuild-configの他ライブラリとの整合性修正

概要

  • npm why @expo/prebuild-configを叩いた時、@expo/prebuild-configのバージョンが下記の通り揃ってなかった
    • eas-cli@3.10.0　→　@expo/prebuild-config@5.0.7
    • expo@48.0.6　→　@expo/prebuild-config@6.0.0
    • expo-splash-screen@^0.18.1　→　@expo/prebuild-config@6.0.1

対応方法

  • GitHubに同じissueにぶつかってる人がいたので参考にした
  • 下記の通りpackage.json上でoverridesで上書きした
  "overrides": {
    "@expo/config-plugins": "~6.0.0",
    "@expo/prebuild-config": "~6.0.0"
  },
  • 結果、まだ1件ずつエラーが残ったので、再度パッチを上げたら完全にエラーが直った
  "overrides": {
    "@expo/config-plugins": "~6.0.2",
    "@expo/prebuild-config": "~6.0.2"
  },
Ren SuyamaRen Suyama

15. expo-modules-autolinking

概要

  • expo-modules-autolinkingのライブラリのバージョンが整合性取れない問題
  • 発覚したきっかけnpx expo-doctorを実行
✔ Check Expo config for common issues
✖ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✖ Check that native modules use compatible support package versions for installed Expo SDK

Detailed check results:

Expected package expo-modules-autolinking@~1.1.0 || ~1.2.0
Found invalid:
  expo-modules-autolinking@1.5.1
  (for more info, run: npm why expo-modules-autolinking)
Advice: Upgrade dependencies that are using the invalid package versions.

対応方法

  • GitHubのissueにexpoのバージョンを48.0.10にすると良いと記載があったので試してみた
  • expo: 48.0.20からexpo: 48.0.10にダウングレード
    • npm install expo@48.0.10
    • npx expo install --fix
  • 変わらずエラーが出てた。。。
Detailed check results:

Expected package expo-modules-autolinking@~1.1.0 || ~1.2.0
Found invalid:
  expo-modules-autolinking@1.5.1
  (for more info, run: npm why expo-modules-autolinking)
Advice: Upgrade dependencies that are using the invalid package versions.
  • 続いて別の解決方法も試してみた
    • 解決方法にはresolutionsと記載があるが、yarnコマンドを使用してる人はresolutionsを使うみたい
    • 私はnpmコマンドのため、package.jsonのoverridesに記載
  "overrides": {
    "expo-modules-autolinking": "~1.2.0"
  },
  • npx expo install --fix
  • npm i
  • npx expo-doctor
  • エラーが解消された🙌
Ren SuyamaRen Suyama

16. expo-firebase-***系 が deprecatedになった問題

概要

  • ここまででnpx expo-doctorで表示するエラーが消えた
  • Expo Goでアプリを起動して、エラーが出てきたら解消していく

対応方法

  • npx expoでアプリを起動
  • エラーが出てきた
 WARN  No native ExpoFirebaseCore module found, are you sure the expo-firebase-core module is linked properly?
 WARN  No native ExpoFirebaseAnalytics module found, are you sure the expo-firebase-analytics's module is linked properly?
 ERROR  Invariant Violation: AsyncStorage has been removed from react-native core. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
  • WARNの上2つはexpo-firebase-***系がlinkされてないと記載があるからGitHubのissueがないか見てみた
  • 両方Expo SDK48系からDeprecatedになっているらしく、expo-firebase-*ではなく、React Native Firebaseを使うようにと記載があった
  • 幸いGitHubにexpo-firebase-*からReact Native Firebaseへのマイグレーション方法が記載されていた
    • npm remove expo-firebase-analytics
    • npx expo install @react-native-firebase/app @react-native-firebase/analytics
    • npx expo install expo-build-properties
    • Expo configファイルで以下設定を行う（私は既に設定されていた）
  • expo-firebase-coreをremoveする
    • 公式によると、expo-firebase-coreはpackage.jsonからremoveするだけで済むそう（追加の対応は不要）
    • npm remove expo-firebase-core
{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ]
  }
}
Ren SuyamaRen Suyama

17. Unable to resolve "expo-firebase-analytics" from "src/app/Foundation.tsx"

概要

  • expo-firebase-analyticsを@react-native-firebase/analyticsに置き換えた際、コードも置き換えそびれてた

対応方法

Ren SuyamaRen Suyama

18. Expo Go → Development buildsへの移行

概要

  • Expo SDK 48に上げた際、expo startが使えないと記載があったのを失念してたが、下記にも記載があるがeas コマンドでDev環境のアプリを起動しないといけなくなった
 ERROR  Invariant Violation: Your JavaScript code tried to access a native module that doesn't exist. 

If you're trying to use a module that is not supported in Expo Go, you need to create a development build of your app. See https://docs.expo.dev/development/introduction/ for more info., js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

対応方法

  • Development buildsの手順に沿ってDev環境の環境設定
  • eas-cliのバージョンアップ（記事に記載はないがiOSのビルド時に止まることが多いので最新に合わせた）
    • "eas-cli": "~3.15.1"を使用していたが、"eas-cli": "^5.4.0"にアップデート
    • npm install eas-cli@5.4.0
    • npx expo install --fix（念の為、整合性が損なわないよう）
    • NODE_ENV=development APP_ALIAS=default npx expo-doctor （念の為、不具合起きてないか）
    • 問題ないことを確認
  • npx expo install expo-dev-client
    • インストールできた
  • eas login
    • Logged in
  • eas.jsonにビルドのconfigを設定
    "development-default-android": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "env": {
        "NODE_ENV": "development",
        "APP_ALIAS": "default"
      }
    },
    "development-default-ios": {
      "developmentClient": true,
      "distribution": "internal",
      "ios": {
        "simulator": true
      },
      "env": {
        "NODE_ENV": "development",
        "APP_ALIAS": "default"
      }
    }
  • Dev環境のビルドを実行
    • eas build --profile development-default-ios --platform ios
  • 失敗
    • patch-package finished with 2 warning(s), 1 error(s).
[stderr] Warning: patch-package detected a patch file version mismatch
[stderr] 
[stderr]   Don't worry! This is probably fine. The patch was still applied
[stderr]   successfully. Here's the deets:
[stderr] 
[stderr]   Patch file created for
[stderr] 
[stderr]     @react-navigation/routers@6.1.8
[stderr] 
[stderr]   applied to
[stderr] [stderr]     @react-navigation/routers@6.1.9
[stderr] 
[stderr]   At path
[stderr] 
[stderr]     node_modules/@react-navigation/routers
[stderr] 
[stderr]   This warning is just to give you a heads-up. There is a small chance of
[stderr]   breakage even though the patch was applied successfully. Make sure the package
[stderr]   still behaves like you expect (you wrote tests, right?) and then run
[stderr] 
[stderr]     patch-package @react-navigation/routers
[stderr] 
[stderr]   to update the version in the patch file name and make this warning go away.
[stderr] 
[stderr] 
[stderr] Warning: patch-package detected a patch file version mismatch
[stderr] 
[stderr]   Don't worry! This is probably fine. The patch was still applied
[stderr]   successfully. Here's the deets:
[stderr] 
[stderr]   Patch file created for
[stderr] 
[stderr]     react-native@0.70.5
[stderr] 
[stderr]   applied to
[stderr] 
[stderr]     react-native@0.71.8
[stderr] 
[stderr]   At path
[stderr] 
[stderr]     node_modules/react-native
[stderr] 
[stderr]   This warning is just to give you a heads-up. There is a small chance of
[stderr]   breakage even though the patch was applied successfully. Make sure the package
[stderr]   still behaves like you expect (you wrote tests, right?) and then run
[stderr] 
[stderr]     patch-package react-native
[stderr] 
[stderr]   to update the version in the patch file name and make this warning go away.
[stderr] 
[stderr] Error: Patch file found for package react-native which is not present at node_modules/@types/react-native
[stderr] 
---
[stderr] patch-package finished with 2 warning(s), 1 error(s).
[stderr] ERROR: "patch-package" exited with 1.
[stderr] npm ERR! code 1
[stderr] npm ERR! path /Users/expo/workingdir/build/expo
[stderr] npm ERR! command failed
[stderr] npm ERR! command sh -c -- run-s prepare patch-package
[stderr] 
[stderr] npm ERR! A complete log of this run can be found in:
[stderr] npm ERR!     /Users/expo/.npm/_logs/2023-10-05T07_16_09_026Z-debug-0.log
npm install exited with non-zero code: 1
  • react-nativeのライブラリのバージョンを上げて、かつ、types/react-nativeを使わなくなった影響で、元々のバージョンに当てていたパッチが不要になった
    • ので、patch-packageで当てていたパッチを外した
  • 再度Dev環境のビルドを実行
    • eas build --profile development-default-ios --platform ios
    • expo.dev上で確認すると、ビルド成功
    • expo.dev上でtar.gzファイルをPCにダウンロード
    • ダウンロードした圧縮ファイルを解凍
    • iOS Simulatorに解凍しファイル（アプリ）をドラックアンドドロップ
    • npx expo start --dev-clientを実行
    • iを選択すると、Simulator上でiPhoneのDevアプリが起動
Ren SuyamaRen Suyama

19. Devアプリを起動してデグレチェック

これ以降は個人的な都合で対応ができず、別の方に引き継いだので書けませんが、
以下対応が追加で必要でした。

  • AsyncStorageでエラー
    • Firebaseのバージョンをv9にアップデートすると解消するはず（他チーム談）
ERROR  Invariant Violation: AsyncStorage has been removed from react-native core. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage, js engine: hermes
  • アプリをmainを使って起動しないといけないエラー
    • SDK48へのアップデート対応で以下の通り書いてあるので対処方法はありそう
    • entryPoint has been removed from app.json / app.config.js. Use main in package.json instead.
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes