Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

111
Vistas
Firebase.collection is not a function

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)'

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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});
    })
  }
}; 
about 4 years ago · Juan Pablo Isaza Denunciar

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda