ExpoとReact Native WebとSupabaseを使用したときに発生するエラーの解決策

Expo + React Native Web + Supabaseのアプリを起動したところ、エラーで起動できなかったので、その対応についての備忘録。

問題

expo start --webでアプリを起動すると

Error: Cannot find module ‘metro/src/lib/TerminalReporter

や

ReferenceError: window is not defined

といったエラーでアプリを起動できない。

対応

1. React NativeのJSバンドラのインストール

   以下のコマンドを実行してMetroパッケージをインストールする。

   npm i --save-dev metro

2. WEBアプリの出力方法の設定

   app.jsonファイルのexpo.web.outputをsingleに設定する。

   {
     "expo": {
       "web": {
         "bundler": "metro",
         "output": "single"
       }
     }
   }

上記設定後にexpo start --webを行うと、エラーが解消しているのが確認できるかと思います。

参考ウェブサイトなど

• Expo Docs
  Publish websites with Metro

以上です。