TypeError: db.collection is not a function when using Firestore in a React component [duplicate]

Question

I am encountering an error while trying to use Firestore in my React component. The specific error message is "Unhandled Runtime Error: TypeError: firebase_firebaseConfig__WEBPACK_IMPORTED_MODULE_4_.db.collection is not a function." I am using the createDocument function to add data to a Firestore collection, but it seems that db.collection is causing the issue.

import { useAuth } from '@/firebase/AuthContext';
import { db } from '@/firebase/firebaseConfig';

async function createDocument(collectionName, data) {
  try {
    const docRef = await db.collection(collectionName).add(data);
    return docRef.id;
  } catch (error) {
    console.error('Error creating document:', error);
    throw error;
  }
}

function Posting() {
  const [text, setText] = useState('');

  function handleKeyPress(event) {
    if (event.key === 'Enter') {
      console.log(text);
      createDocument('posts', text);
      console.log('document has been created in Firestore');
    }
  }

  // Other component logic...

  return (
    // JSX for the component...
  );
}

this is my firebase config file:

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //api keys from google firebase
  // ...
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const db = getFirestore(app);

Any help or guidance on resolving this issue would be greatly appreciated. Thank you in advance!

db is imported from @/firebase/firebaseConfig, but we can't see what that is. That makes it impossible for us to know why it doesn't have a method collection on it as the error message says. Please edit the question to provide complete information on how to reproduce this problem. — Doug Stevenson
– Doug Stevenson, Commented May 18, 2023 at 22:34
hello there, i have added the firebase config file which should include the db since i exported it — Techlover69
– Techlover69, Commented May 18, 2023 at 22:36
You're trying to mix the modular syntax of SDK versions 9 and later, with the namespaced syntax of SDK versions 8 and before. That won't work, so you'll have to pick one or the other and then follow the syntax code examples for that specific variant. E.g. to get a collection in the modular syntax, see the code sample here: firebase.google.com/docs/firestore/query-data/… — Frank van Puffelen
– Frank van Puffelen, Commented May 18, 2023 at 22:46

Ahmed Sbai · Accepted Answer · 2023-05-18 22:47:29Z

1

This example if from firebase docs

import { collection, addDoc } from "firebase/firestore"; 

// Add a new document with a generated id.
const docRef = await addDoc(collection(db, "cities"), {
  name: "Tokyo",
  country: "Japan"
});
console.log("Document written with ID: ", docRef.id);

This is how to add data in their latest web version 9.

import { collection, addDoc } from "firebase/firestore"; 
//...
try {
    const docRef = await addDoc(collection(db, collectionName), data);
    return docRef.id;
} catch (error) {
    console.error('Error creating document:', error);
    throw error;
}

answered May 18, 2023 at 22:47

Ahmed Sbai

16.6k11 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: db.collection is not a function when using Firestore in a React component [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related