Next.jsとfirebaseを使用する際のエラー対応

2021年12月20日

購入した紙の本（React.js&Next.jsの本）をもとに入力・実行していたら、以下のエラーが出てきた。

Module not found: Package path . is not exported from package
　　　・
　　　・
　　　・
import firebase from 'firebase'  //ここが悪いらしい

ネットでいろいろ調べてみると、Firebase JavaScript SDK v9がリリースされ、npm install firebase等でインストールするとv9がインストールされるようになったらしい。

本のサンプルは、前バージョンのv8系またはそれ以前のコードで書いてあると思われるため、v9との互換性の問題があり、エラーが出ているようだ。v9では必要なものだけインポートするようにしなければならなかったりするらしい。

しかし、本の内容からあまり変えないで学習したかったため、とりあえずは次のようにcompatを入れたインポートにしたら問題がなくなった。

import firebase from 'firebase/compat/app'

次は別のエラーが発生。

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_3__.default.firestore is not a function
　　　・
　　　・
　　　・
const db = firebase.firestore()//ここでエラーが発生しているらしい

firebase.forestore()でエラーが発生。

import 'firebase/compat/firestore'

のようにとりあえずcompatをつけてインポートを追加したらうまく動くようになった。

以上の対応は、とりあえずの対応です。本来はv9系の書き方に合わせて変更したほうが良いでしょう。