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.
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()));
});
}, [])