I'm working on this newsletter which takes the user's full names, email, and phone numbers. Every time I try to submit the info I get this error ->
Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function
at submit (Newsletter.jsx:13:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4284:1)
at executeDispatch (react-dom.development.js:9011:1)
at processDispatchQueueItemsInOrder (react-dom.development.js:9043:1)
at processDispatchQueue (react-dom.development.js:9056:1)
at dispatchEventsForPlugins (react-dom.development.js:9067:1)
at react-dom.development.js:9258:1
This is my code ->
firebasse.js
import { initializeApp } from "firebase/app";
import { getFirestore} from "firebase/firestore";
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
export default db;
Newsletter.jsx
import { React, useState } from "react";
import "./newsletter.css";
import db from "../../firebase";
const Newsletter = () => {
const [userName, setUserName] = useState("");
const [userEmail, setUserEmail] = useState("");
const [userPhoneNumber, setUserPhoneNumber] = useState("");
const submit = (e) => {
e.preventDefault();
db.collection("Users").add({
name: userName,
email: userEmail,
phoneNumber: userPhoneNumber,
});
setUserName("");
setUserEmail("");
setUserPhoneNumber("");
};
one of the input field
<div className="newsletterInput">
<input
type="name"
onChange={(e) => setUserName(e.target.value)}
placeholder="Full Name"
required
/>
</div>
You're using the modular version of Firestore which is the Web Version 9. There are some items that you need to add/change.
You should import the necessary methods from firebase/firestore.
import { collection, addDoc } from "firebase/firestore";
The syntax for adding a document to a collection has changed using v9. See sample code below:
// Add a new document with a generated id.
const docRef = await addDoc(collection(db, "User"), {
name: userName,
email: userEmail,
phoneNumber: userPhoneNumber
});
You should check out the Modular version of the Firestore. Here are some documentation to start with: