'Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function [duplicate]

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>

Solution 1:^[1]

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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Marc Anthony B

'Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_2__.default.collection is not a function [duplicate]

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]