Fetching data from Firebase with react

Question

Anyone have an idea how can i fetch data from firestore?

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
    apiKey: "AIzaSyCNBAxjeKNoAPPjBV0JW4vZ0QaTaOx9-L4",
    authDomain: "tomaproject-6b82b.firebaseapp.com",
    projectId: "tomaproject-6b82b",
    storageBucket: "tomaproject-6b82b.appspot.com",
    messagingSenderId: "1041229848485",
    appId: "1:1041229848485:web:3678c821ef1bd3a9"
};

// Use this to initialize the firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);

// Use these for db & auth
const db = firebaseApp.firestore();
const auth = firebase.auth();

export default { auth, db };

I am trying to fetch data using db.collection in useEffect function.

Error i keep getting : firebase__WEBPACK_IMPORTED_MODULE_6_.default.collection is not a function

Any suggestions?

import db from '../../firebase';

const HomeScreen = (props) => {

    const username = props.email
    return (
        <div className={styles['wrapper']}>
            <Container className={styles['wrapping-container']} >
                <h2 className={styles['Login-user-class-paragraph']}> Welcome {username}!</h2>
                <Row>
                    <Col md={2}>
                        <Container>
                            <SidePanel />
                        </Container>
        </div>
    )
}

export default HomeScreen;

Have you tried this: stackoverflow.com/questions/69030610/… — Bob
– Bob, Commented Apr 14, 2022 at 8:29
@Bob OP is using the compat version already so that's unrelated. — Dharmaraj
– Dharmaraj, Commented Apr 14, 2022 at 8:30

Dharmaraj · Accepted Answer · 2022-04-14 08:35:31Z

1

The { auth, db } is default export from firebase.js.:

import db from "../../firebase"

// db is { auth, db }
// db.collection will throw the error
// db.db.collection() will work as intended

Alternatively, you can remove the default so the export statement is:

export { auth, db }

Then import Firestore instance as shown below:

import { db, auth } from "../../firebase"

// here db is Firestore instance

answered Apr 14, 2022 at 8:35

Dharmaraj

51.3k8 gold badges67 silver badges100 bronze badges

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

Collectives™ on Stack Overflow

Fetching data from Firebase with react

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related