TypeError while including firebase in react App-CodePudding

App.js

import { useState, useEffect } from "react";
import "./styles.css";
import { Button, TextField } from "@mui/material";
import List from "./List";
import db from "./firebase.js";

export default function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");
  useEffect(() => {
    db.collection("todos").onSnapshot((snapshot) => {
      setTodos(snapshot.docs.map((doc) => doc.data().todo));
    });
  }, []);

  const addtodo = (event) => {
    setTodos([...todos, input]);
    event.preventDefault();
    setInput("");
    console.log(todos);
  };

  return (
    <>
      <div className="App">
        <h1>TODO LIST</h1>
        <form>
          <TextField
            value={input}
            onChange={(event) => setInput(event.target.value)}
            id="standard-basic"
            label="TODO"
            variant="standard"
            color="secondary"
          />
          <Button
            variant="contained"
            disabled={!input}
            type="submit"
            onClick={addtodo}
          >
            ADD TODO
          </Button>
        </form>
      </div>
      <ul>
        {todos.map((todo) => (
          <List text={todo} />
        ))}
      </ul>
    </>
  );
}

List.js

import React from "react";
import { ListItemButton, ListItemText } from "@mui/material";

function List(props) {
  return (
    <div>
      <ListItemButton component="a" href="#simple-list">
        <ListItemText primary={props.text} />
      </ListItemButton>
    </div>
  );
}

export default List;

firebase.js

    import * as firebase from "firebase/app";
import "firebase/firestore";

const firebaseApp = firebase.initializeApp({
  apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  authDomain: "todo-835e4.firebaseapp.com",
  projectId: "todo-835e4",
  storageBucket: "todo-835e4.appspot.com",
  messagingSenderId: "719788228877",
  appId: "1:719788228877:web:a517acaef495f8ae3b3044"
});

const db = firebaseApp.firestore();

export { db };

This is the error I'm getting:

TypeError
firebase.initializeApp is not a function
$csb$eval
/src/firebase.js:4:29
  1 | import * as firebase from "firebase/app";
  2 | import "firebase/firestore";
  3 | 
> 4 | const firebaseApp = firebase.initializeApp({
    |                             ^
  5 |   apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  6 |   authDomain: "todo-835e4.firebaseapp.com",
  7 |   projectId: "todo-835e4",

I tried most of the solutions given in stackoverflow still I'm unable to resolve it. I even changed the version of firebase to older one still no resolution. So Posting it in here if anyone can look at my code and resolve it.

Here is the codesandbox: https://codesandbox.io/s/todo-with-firebase-3fpup?file=/src/firebase.js

CodePudding user response：

My firebase.js is a bit different than yours, take a look:

import firebaseApp from 'firebase/app';
import { firebase } from "./firebase"

    firebaseApp.initializeApp({
        apiKey: '',
        authDomain: '',
        //...
    })

export const db = firebaseApp.firestore();

CodePudding user response：

There's been some update to firebase, it's now modular so what you do is import them as functions from firebase. Here's what your code should look like.

Firebase.js

import { initializeApp, getApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "AIzaSyCLCvoOwXwcZcZ20S1rW4g8LCLxGiXsk3Y",
  authDomain: "todo-835e4.firebaseapp.com",
  projectId: "todo-835e4",
  storageBucket: "todo-835e4.appspot.com",
  messagingSenderId: "719788228877",
  appId: "1:719788228877:web:a517acaef495f8ae3b3044"
}
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp(); 

const db = getFirestore();
export default app;
export { db };