🚴‍♂️

expo48を51へアップグレード

2024/11/10に公開

React Native

放置しすぎ感はあるけど、expo48のreact-nativeアプリを一気にexpo51へアップグレード。こまめにやらんといけませんな。

51はnode18以上なのでアップグレードする。yarnも一応最新に。

volta pin node@18.20.4
volta pin yarn@1.22.22

expo-cliをアップグレードしようと思ったら下記の警告。

The global expo-cli package has been deprecated

globalは削除する。

yarn global remove expo-cli

expoに含まれるので特に何も入れないけどnode_modules以下のexpo-cliを実行するため、以降は npx expoあるいはyarn run expoとする必要がある。

本体をアップグレード。

yarn add expo@^51.0.0

expo-localizationをapp.config.tsに追加しろと出るので追加した（詳細は不明、とりあえず先に進む）。

    },
+   plugins: ['expo-localization'],
  },
};

依存関係をアップグレードする。

npx expo install --fix

チェックする。

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.

書いてある通り@types/react-nativeはパッケージに含まれるのでpackage.jsonから削除する。

-    "@types/react-native": "~0.71.6",

依存関係をアップグレード。--fixとの違いは調べてないが、doctorの後にはこれをしろとでる。

npx expo install --check

念の為再度チェック。

npx expo-doctor

✔ Check package.json for common issues
✔ Check Expo config for common issues
✔ Check native tooling versions
✔ Check if the project meets version requirements for submission to app stores
✔ Check for common project setup issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for app config fields that may not be synced in a non-CNG project
✔ Check for issues with Metro config
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check that native modules do not use incompatible support packages
✔ Check for legacy global CLI installed locally
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

オールグリーン。

expoをスタートしてみる。

yarn start

# 以下、いつものQRコードとヘルプが表示。警告やエラーはなし。

iPhoneのシミュレーターを立ち上げiを押し実行してみる。シミュレーター側で下記のエラー。

index.js: /path/to/index.js: Invalid Version: 70001800006

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_drain
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0

何が何だかさっぱりわからんがInvalid Version: 70001800006で検索するとbabelのリポジトリが引っかかり、リンク先は404。消すなよbabel。

何か（たぶんbabel）のバージョンのミスマッチだと思われる。アップグレードしようかと思ったが、--fixや--checkで変わってるはずだと思い、試しにnode_modulesディレクトリとyarn.lockを削除して入れ直してみる。

yarn install

シミュレーターのexpo goを閉じて再度i。今度はトランスパイルらしきプログレスバーが表示され（久しぶりなのでこれを忘れていた。謎エラーの原因はやはりbabel関連の可能性が濃厚）、エラー箇所がわかるエラーに変わる。

ちなみにbabelの主要なやつは下記のようにアップグレードされた模様。

@babel-cli: 7.18.10 -> 7.25.9
@babel-core: 7.21.8 -> 7.26.0

他にもたくさんアップグレードされていたので、本当の原因は不明。

新しいエラーは下記。ここから先は使ってるライブラリーしだいなので書いてもあまり参考にならないと思いますが、これ直したらホーム画面まで出たので、一応載せときます。

 ERROR  TypeError: Cannot read property 'prototype' of undefined, js engine: hermes
info Opening /path/to/node_modules/react-native-draggable-flatlist/lib/constants.js with code

現在react-native-draggable-flatlistは3.1.2だけど、githubみたら4.0.1が最新だったので変えてみる。

+    "react-native-draggable-flatlist": "^3.1.2",
+    "react-native-draggable-flatlist": "^4.0.1",

yarn install

これでホーム画面が出ました。今後、動作確認していけば、おそらく、他にもバージョンの問題によるエラーが出そう。コードの変更も必要な可能性がありますね。頑張ろうっと。

この記事は一応ここまでにしておきます。

Discussion