TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function

user_16771159 0
Viewed 9246

This is my first time asking a question on StackOverflow. I am making a school project and I am a beginner at Firebase and JavaScript. I am trying to make a Tinder clone. React is telling me there's an error in this part of my code. At first I had different errors but they were Firebase syntax related and I promptly fixed them but now I don't have a clue on what this error means. My code works on localhost for a split second (I see my application) and then the error appears.

import React, { useEffect, useState } from 'react';
import TinderCard from 'react-tinder-card';
import database from './firebase';
import './SwipeCards.css';

...

function SwipeCards() {

...

useEffect(() => {
        database.collection('buddies').onSnapshot((snapshot) => setBuddies(snapshot.docs.map((doc) => doc.data())));
    }, []); 

...

}

I've tried two solutions of similar problems other people had, namely: (in my tinderCards.js)

database.firestore().collection('buddies')...

and (in my firebase.js)

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

...

const firebaseApp = initializeApp(firebaseConfig);
const database = getFirestore(firebaseApp);
export default database;

But both didn't work. I can post more of the code if needed. Any help would be greatly appreciated.

google-cloud-firestore firebase reactjs javascript
1 Answers

You are using the new modular SDK (v9) which no longer uses firebase.firestore() namespace. I'd recommend following the documentation to learn about new syntax:

import database from './firebase';
import { doc, onSnapshot, collection, query, where, onSnapshot } from "firebase/firestore";

useEffect(() => {
  const q = query(collection(db, "buddies"))
  const unsub = onSnapshot(q, (querySnapshot) => {
    console.log("Data", querySnapshot.docs.map(d => doc.data()));
  });
}, [])
user_131306970
Related