React + Firebaseでfirestore()が使用できない

Question

前提・実現したいこと

React + FirebaseでWebアプリを作成しています。
ReactでFirebaseのfirestoreが使用できないエラーが出ており、そのエラーを解決したいです。

発生している問題・エラーメッセージ

TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function

該当のソースコード

import firebase from "firebase/compat/app";
import "firebase/firestore";
import firebaseConfig from "./config";

firebase.initializeApp(firebaseConfig);
export const db = firebase.firestore();  // ここでエラーが発生している

reactとfirebaseのバージョンは以下(package.jsonの抜粋)

  "dependencies": {
    "firebase": "^9.0.1",
    "react": "^17.0.2",
  },

試したこと

この記事を試しました。

最初のアンサーのようにcompatを使用しないようにしました。

// import firebase from "firebase/compat/app";
import firebase from "firebase/app";
import "firebase/firestore";
import firebaseConfig from "./config";

firebase.initializeApp(firebaseConfig);
export const db = firebase.firestore();

そうすると、別のエラーが発生しました。

./src/firebase/index.js
Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase').

そのため、次のエラーを解決するために、この記事を試しました。

このエラーを解決するにはcompat/app'を使うでした。
これらから、compatをつけるつけないの無限ループとなり、詰まってしまいました。
もし、解決方法がわかりそうな方がいらっしゃれば、ご回答の程よろしくお願いします。

Answer 1

import "firebase/compat/firestore";

とすれば解決しました。