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;
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});
})
}
};
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.