Expo project TypeError: undefined is not an object (evaluating '_firebase.default.firestore')

Question

I have and Expo project with this firebase config file:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  ...
};

if (!firebase.apps.length){
  firebase.initializeApp(firebaseConfig);
}

export { firebase };

I'm calling its methods like this:

const [events, setEvents] = useState([]);
    const evsRef = firebase.firestore().collection('testing');

    const getEvents = () => {

        evsRef.onSnapshot(
            snapshot => {
                const evs = [];
                snapshot.forEach((doc)=>{
                    const {name, height, features:{good, better, best}} = doc.data();
                    evs.push({
                        key: doc.id,
                        name, height, 
                        features:
                            {
                                good, 
                                better, 
                                best
                            }
                    }) 
                })
                setEvents(evs);
            }
        )
        return;
    }

    useEffect(() => {
        getEvents();
        console.log('Testing: ', events);
    },[events])

And I get this error:

TypeError: undefined is not an object (evaluating '_firebase.default.firestore')

Any ideas? I'm new to React-Native/Expo and I can't find any consisting examples as to what method to use for communication with firebase/firestore, so far I've been using collection(db, 'collection name') but this one seems more documented.

Answer 1

Turns out I was mixing up V9 with code from V8 as it was pointe out in the comments, the confusion started with me using the node.js examples as opposed to Web 9 examples, so be aware of that. Here's the code:

Firebase Config

import { initializeApp, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import geofire from 'geofire';

const firebaseConfig = {...};

const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);

export default firestore;

And this is the query code:

const getEvents = async (dbx) => {
    const eventsCol = collection(dbx, 'testing');
    const eventSnapshot = await getDocs(eventsCol);
    const eventList = eventSnapshot.docs.map((doc) => 
      ({
        ...doc.data(),
        key: doc.id
      })
    );
    setEvents(eventList)
    return eventList;
  }