Expoでfirebaseを使いたい

下記の公式ガイドに沿って導入したところ、コンパイル時にエラー。

https://firebase.google.com/docs/web/setup?hl=ja

While trying to resolve module `idb` from file `/Users/pj/node_modules/@firebase/app/dist/esm/index.esm2017.js`, the package `/Users/pj/node_modules/idb/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/pj/node_modules/idb/build/index.cjs`. Indeed, none of these files exist:

  * /Users/pj/node_modules/idb/build/index.cjs(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
  * /Users/pj/node_modules/idb/build/index.cjs/index(.native|.ios.expo.ts|.native.expo.ts|.expo.ts|.ios.expo.tsx|.native.expo.tsx|.expo.tsx|.ios.expo.js|.native.expo.js|.expo.js|.ios.expo.jsx|.native.expo.jsx|.expo.jsx|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json|.ios.wasm|.native.wasm|.wasm)
Failed building JavaScript bundle.

調べてみると、EXPO の公式ガイドに Firebase の使い方が載っていた。

https://docs.expo.dev/guides/using-firebase/

expo install firebase でインストールしろ、と書いていたので一旦 yarn remove firebase して expo コマンドで入れる。expo コマンドでいれると、Expo の SDK のバージョンに合わせて必要な依存ライブラリを入れてくれるみたい。

ただ、package.json を見る限りでは firebase しかインストールされていないので期待できないが。

ビルドするとやっぱり同じエラー…

下記を見ると metro.config.js という設定ファイルを追加し、拡張子に cjs を追加するといけるかも。

https://stackoverflow.com/questions/60124435/however-this-package-itself-specifies-a-main-module-field-that-could-not-be-r?answertab=trending#tab-top

Expo でも使える話なのかよくわからなかったが、Expo の公式ガイドにも載っていた。

https://docs.expo.dev/guides/customizing-metro/

ただ、SDK のバージョンが 41 以前は @expo/metro-config というライブラリを追加する必要があるようなので、expo install @expo/metro-config でインストール。

その上で、ルートフォルダに metro.config.js を作成。

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts.push('cjs');

module.exports = defaultConfig;

うーん、同じエラー。上記が上手く読み込まれてないのだろうか？もう少し調べると、下記を見つけた。

https://stackoverflow.com/questions/72158122/expo-firebase-authentication-while-trying-to-resolve-module-idb-from-file?answertab=trending#tab-top

sourceExts ではなく assetExts に追加しないとダメなのかも。

defaultConfig.resolver.assetExts.push('cjs'); に変えたらいけた！