Firebase.collection is not a function

user_17315495 0
Viewed 571

Net Ninja's React Redux & Firebase Tutorial(2018)

Currently working through this tutorial, and in 5:56 into his tutorial, he is in projectActions.js. The code presented is the exact replica of my code. However I get this error:

TypeError: firebase.collection is not a function

Here is my code:

export const createProject = (project) => {
    return (dispatch, getState, { getFirebase, getFirestore}) => {
        //make an async call to firebase
        const firebase = getFirestore();
        firebase.collection('projects').add({
            ...project,
            authorFirstName: 'Net',
            authorLastName: 'Ninja',
            authorID: 12345,
            createdAt: new Date(),
        }).then(() => {
            dispatch({ type: 'CREATE_PROJECT', project});
        }).catch((err) => {
            dispatch({ type: 'CREATE_PROJECT_ERROR', err});
        })
    }
};

Looked through Firebase's docs, but with no avail, so unsure how to resolve this error

Thanks for any help

Edit 1

As requested, my config file(data removed):

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import firebase from 'firebase/compat/app';
import 'firebase/firestore';
import 'firebase/auth';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


export default firebase;

The object that 'firestore' returns looks like this: result of 'console.log(firestore)'

react-redux google-cloud-firestore firebase javascript
2 Answers

It seems you have new Modular SDK (V9.0.0+) installed and following an old tutorial which uses older name-spaced syntax. I'd recommend following the documentation and switch to newer syntax (the docs also contain examples with older syntax). Try refactoring your code to:

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const firestore = getFirestore(app)

import { firestore } from '../path/to/config/file';
import { collection, addDoc } from "firebase/firestore"; 

export const createProject = (project) => {
  return (dispatch, getState, { getFirebase, getFirestore}) => {
    //make an async call to firebase
    
    addDoc(collection(db, "projects"), {
      ...projectData
    }).then(() => {
      dispatch({ type: 'CREATE_PROJECT', project});
    }).catch((err) => {
      dispatch({ type: 'CREATE_PROJECT_ERROR', err});
    })
  }
};
user_131306970

I have found my own Solution

The reason why my code didnt work, was because i hadnt imported the initialised app into my index file. And the passed it into getFirestore(). Therefore there was no connection between the config and the createProject function.

Here is the code:

import app from '../../config/fbConfig.js';

export const createProject = (project) => {
    return (dispatch, getState, { getFirebase, getFirestore }) => {
        //make an async call to firebase
        const db = getFirestore(app).collection("projects")
            db.add({
                ...project,
                authorFirstName: 'Net',
                authorLastName: 'Ninja',
                authorID: 12345,
                createdAt: new Date(),
            }).then(() => {
                dispatch({ type: 'CREATE_PROJECT', project });
            }).catch((err) => {
                dispatch({ type: 'CREATE_PROJECT_ERROR', err });
            })
    }
};

// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import firebase from 'firebase/compat';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);

// export const auth = getAuth(app);
export default app

This creates a new collection in the firebase db.

user_173154950
Related