概要
2024年2月時点で、EXPO50が正式にリリースされているが、その前段階でEXPO49にアップグレードした際、webアプリ画面が真っ白になって困ったので、その対策の備忘録
（EXPO50 では修正ずみのバグらしいので、現在はあまり気にしなくても良さそう）
環境
- ReactNative : v.0.72.6
- react-native-webview : v.0.19.10
- Expo : v.49
参考
- https://blog.expo.dev/expo-sdk-49-c6d398cdf740
- https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/
- https://github.com/expo/expo/issues/23819
起きた問題
公式のアップデート手順に従って、EXPO48 → EXPO49のバージョンアップ。
バージョンアップ後、 expo start --web でwebアプリとして起動時に、画面がBlankになる。
ただし、Android / iOSアプリは問題なくビルド、動作可能である。
結論
以下対応を行うとページが描画されるようになった
① expo-routerを導入する。以下、yarnで入れた例
$yarn add expo-router@2.0.0
② app.config.jsに以下設定を追加
plugins: [
"expo-router"
],
試行錯誤したものたち
bundlerの変更
WebpackからMetroに変更。
metro.config.js (またはmetro.config.ts)を用意。
また、app.jsonのweb設定部分を以下のように変更
"web": {
"bundler": "metro"
},