firebaseApp is not defined in firebase file

user_17251344 0
Viewed 573

My firebase has some problems which the console says firestore is undefined. I think the problem actually comes from my firebaseApp or somewhere but i don't know how to fix it. it'd be kind of you guys to help me! Thank you so much!

This is my firebase.js:

import firebase from 'firebase';

const firebaseApp = firebase.initializeApp[{
    apiKey: "<API_KEI>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<PROJECT_ID>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
    appId: "<APP_ID>",
    measurementId: "<MESURMENT_ID>"
}];

const db = firebaseApp.firestore();
const auth = firebase.auth();

export {
    auth,
    db
};

This is my SignIn.js:

import React from "react";
import firebase from "firebase";
import {
    auth
} from "../firebase.js";

function SignIn() {
    function signInWithGoogle() {
        const provider = new firebase.auth.GoogleAuthProvider();
        auth.signInWithPopup(provider);
    }

    return ( <
        div >
        <
        button onClick = {
            signInWithGoogle
        } > Sign in with google < /button>{" "} <
        /div>
    );
}

This is my App.js:

import React from 'react'
import SignIn from './components/SignIn'
import Chat from './components/Chat'

function App() {
    return ( <
        div >
        <
        SignIn / >
        <
        Chat / >
        <
        /div>
    )
}

export default App

This is my package.json:

{
  "name": "image-search",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.0.1",
    "@mui/material": "^5.0.1",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "firebase": "^8.10.0",
    "font-awesome": "^4.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-firebase-hooks": "^3.0.4",
    "react-scripts": "4.0.3",
    "uuidv4": "^6.2.12",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-react": "^7.14.5"
  }
}
google-cloud-firestore firebase reactjs javascript
1 Answers

You can use latest firebase and check the docs below.

In your code, const db = firebaseApp.firestore();, but latest version use const db = getFirestore(app); to initialize db.

This is a demo from official network.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

And find more information in this page firebase

user_142450470
Related