Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

112
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda