如何将 firebase 添加到我的反应项目中？

Question

I found an article on Medium which uses React and Firebase for a Todolist application. Following the instructions on the article, I installed all the needed dependancies, created the React app and copy pasted in the code. I then also went to Firebase and added in a collection as specified in the article https://medium.com/@sarahzhan/building-a-todo-app-with-crud-operations-using-firebase-react-hooks-and-material-ui-caf4b1f2ecbc . However, when I run the development server I get an error saying:

./src/App.js
Module not found: Can't resolve 'firebase' in {folder-name}

So my question is, how do I fix this, and what am I doing wrong?

This is the code, in case it helps:

firebase.js

import firebase from "firebase";

    const firebaseApp = firebase.initializeApp({
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxxxxxxxxx",
      projectId: "xxxxxxxxxxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxxxxxxxx",
      messagingSenderId: "xxxxxxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxx",
    });
    
    const db = firebaseApp.firestore();
    
    export default db;

App.js

import React, { useState, useEffect } from "react";
import {
  Button,
  FormControl,
  InputLabel,
  Input,
  FormHelperText,
} from "@material-ui/core";
import firebase from "firebase";

import Todo from "./Todo";
import db from "./firebase";

function App() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  // when the app loads, we need to listen to firebase
  // fetch new todos as they get added/removed
  useEffect(() => {
    // this fires when the app.js loads
    // everytime the db changes, it snaps it and give you that snapshot
    db.collection("todos")
      .orderBy("timestamp", "desc")
      .onSnapshot((snapshot) => {
        // this gives back an array
        setTodos(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            todo: doc.data().todo,
          }))
        );
      });
  }, []);

  const addTodo = (event) => {
    event.preventDefault();

    db.collection("todos").add({
      todo: input,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
    });
    // empty input after the todo is successfully stored in firebase
    setInput("");
  };

  return (
    <div className="App">
      <h1>Hello World!!!</h1>
      <form>
        <FormControl>
          <InputLabel>
            <span role="img" aria-label="emoji">
              ✅
            </span>
            Write a Todo
          </InputLabel>
          <Input value={input} onChange={(e) => setInput(e.target.value)} />
          <FormHelperText>We'll make you productive</FormHelperText>
        </FormControl>

        <Button
          disabled={!input}
          type="submit"
          variant="contained"
          color="primary"
          onClick={addTodo}
        >
          Add Todo
        </Button>
      </form>

      <ul>
        {todos.map((todo) => (
          <Todo todo={todo} />
        ))}
      </ul>
    </div>
  );
}

export default App;

Todo.js

import React, { useState } from "react";
import {
  List,
  ListItem,
  ListItemText,
  ListItemAvatar,
  Button,
  Modal,
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
// import "./Todo.css";

import db from "./firebase";

const useStyles = makeStyles((theme) => ({
  paper: {
    position: "relative",
    left: 400,
    width: 600,
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
  button: {
    width: 150,
    margin: "10px",
  },
}));

const Todo = (props) => {
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  const [input, setInput] = useState();

  const handleOpen = () => {
    setOpen(true);
  };

  const updateTodo = () => {
    db.collection("todos").doc(props.todo.id).set(
      {
        todo: input,
      },
      // prevents you to overwrite/remove it, instead update it
      { merge: true }
    );
    setOpen(false);
  };
  return (
    <>
      <Modal open={open} onClose={(e) => setOpen(false)}>
        <div className={classes.paper}>
          <h3>Update the Task</h3>
          <input
            placeholder={props.todo.todo}
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
          <Button
            variant="contained"
            color="default"
            onClick={updateTodo}
            className={classes.button}
          >
            Update ✔
          </Button>
        </div>
      </Modal>
      <List className="todo__list">
        <ListItem>
          <ListItemAvatar></ListItemAvatar>
          <ListItemText
            primary={props.todo.todo}
            secondary="Uploaded Task 🤞 "
          />
        </ListItem>

        <button onClick={(e) => setOpen(true)}>Edit</button>

        <Button
          onClick={(e) => db.collection("todos").doc(props.todo.id).delete()}
        >
          DELETE
        </Button>
      </List>
    </>
  );
};

export default Todo;

These are my dependancies.

"dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "dotenv": "^10.0.0",
    "firebase": "^9.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

Any help would be extremely helpful.

Answer 1

You have to use new commands to add firebase in your application because of version change from firebase 8 to firebase 9.0 You can Find useful commands at their official site https://firebase.google.com/docs/web/modular-upgrade

Before: version 8

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

After: version 9 compat

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Answer 2

Here is a small gist with a hook I made as an alternative to react-firebase-hooks, and hopefully it will be of use and if anyone wants to make suggestions I'm open to receiving them.

Nowadays you'll have to set via functions the collection and document references, instead of chaining from the firestore instance you create from your initialized app.

Pretty much here's a snippet:

import { fs } from "../config/firebase"; // const fs = useFirestore() from the initializeApp config
import { collection, query, where, getDocs, limit, WhereFilterOp } from "firebase/firestore";

import useInterval from "./useInterval";

export interface IQuery {
  ref: string;
  operator: WhereFilterOp;
  value: any;
}

const useFirestore = (
  collectionString: string = "defaultCollection",
  limitNumber: number = 100,
  queryData?: IQuery
) => {
  const [data, setData] = useState<any[] | void>([]);

  // Instead of using the snapshot directly, im throttling the data updating to a second.
  useInterval(async () => {
    const result = await querySnapshot;
    setData(result);
  }, 1000);

  // Create a query against the collection.
  const q = queryData
    ? query(
        collection(fs, collectionString),
        where(queryData?.ref, queryData?.operator, queryData?.value),
        limit(limitNumber)
      )
    : query(collection(fs, collectionString), limit(limitNumber));

  const querySnapshot = getDocs(q)
    .then((snapshot) => {
      const data: any[] = snapshot.docs.map((doc) => {
        return {
          id: doc.id,
          ...doc.data(),
        };
      });
      return data;
    })
    .catch((error) => {
      console.error("Error getting documents: ", error);
    });

  return { data };
};

export default useFirestore;

And this is how you can call it:

const { data: alias } = useFirestoreQuery("collection");
const { data: alias } = useFirestoreQuery("collection", 50 //limit);
const { data: alias } = useFirestoreQuery("collection", 10, {
ref: "location",
operator: "==",
value: name,
});

GIST