CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
Anthony
Anthony

Reputation: 77

TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function

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.

Upvotes: 4

Views: 19582

Answers (2)

Dharmaraj
Dharmaraj

Reputation: 50930

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 } from "firebase/firestore";

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

Upvotes: 6

Ashish Khadka
Ashish Khadka

Reputation: 11

You can use the following syntax:

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

const firebaseConfig = {
//Get this from your firebase console
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { db, auth };

Upvotes: 0

Related Questions