Update Expo SDK 50 to 51
つねみ@tocomiExpo で開発しているアプリケーションを実機で動かそうとしたら SDK 51 へのバージョンアップが必要ということで、アップデートした。
この手のアップデートがエラーなく終わった試しが無いんだけど、今回も案の定エラーが発生したのでその解決を目指す。
つねみ@tocomiアップデート
公式ドキュメントを参考に下記コマンドを実行
npx expo install expo@^51.0.0 --fix
アプリ起動時に起きるようになったエラー
iOS Bundling failed 5ms node_modules/expo/AppEntry.js (1 module)
error: TypeError: Cannot read properties of undefined (reading 'transformFile')
at Bundler.transformFile (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/Bundler.js:60:30)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at Object.transform (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/lib/transformHelpers.js:150:12)
at transform (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/DeltaBundler/Graph.js:256:26)
at visit (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:29)
at async Promise.all (index 0)
at buildSubgraph (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/DeltaBundler/buildSubgraph.js:127:3)
at Graph._buildDelta (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/DeltaBundler/Graph.js:249:22)
at Graph.initialTraverseDependencies (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/DeltaBundler/Graph.js:227:19)
at DeltaCalculator._getChangedDependencies (/Users/tocomi/develop/knewme/knewme-mobile/node_modules/metro/src/DeltaBundler/DeltaCalculator.js:221:25)
metro の中でエラーが起きている模様。
metro って？
Facebook 製の、React Native 向けの bundler らしい。
webpack 的なものだと解釈した。
調査
metro の issues を調べてみたら類似の issue があった。
が、記載している情報が少なすぎて調査してもらえていない、、
closed の issue を見ると node v17 から v16 にすると起きなくなったという報告がある。
今自分が使っているのは v20.11.0。これが原因の可能性があるのか？
解決編
node_modules を全部消してから yarn install し直したらエラーでなくなった、くぅ〜
rm -rf node_modules && yarn
routing が発生するとアプリがクラッシュしてしまう
多分これが近いのかな
Expo Router may crash in SDK 51 when switching tabs (related issue). The workaround is to add import 'react-native-reanimated' in a top-level _layout file. A fix will be coming shortly to Expo Go, or you can bump react-native-reanimated to 3.11.0 in your development builds and ignore validation. Learn more
この issue が詳しく書いてあった。結局 reanimated を import するのが正当な回避策なのか。
React Navigation 絡みの場合は App.js で reanimated を import すれば良いみたい。
シンプルに yarn add したら下のエラーが出た。
3.11.0 をインストールしていたが、 native に合わせるために 3.10.0 を使う必要があるみたい。
ERROR Error: [Reanimated] Mismatch between JavaScript part and native part of Reanimated (3.11.0 vs 3.10.0).
See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#mismatch-between-javascript-part-and-native-part-of-reanimated` for more details., js engine: hermes
3.10.0 をインストールし直して起動したら解消！