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

Question

我在 Medium 上找到了一篇文章，其中使用 React 和 Firebase 来构建 Todolist 应用程序。按照文章中的说明，我安装了所有需要的依赖项，创建了 React 应用程序并复制粘贴到代码中。然后，我还转到 Firebase 并添加到文章https://medium.com/@sarahzhan/building-a-todo-app-with-crud-operations-using-firebase-react-hooks-and中指定的集合中-material-ui-caf4b1f2ecbc。但是，当我运行开发服务器时，我收到一条错误消息：

\n

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

\n

所以我的问题是，我该如何解决这个问题，我做错了什么？

\n

这是代码，如果有帮助的话：

\n

firebase.js

\n

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

\n

应用程序.js

\n

import React, { useState, useEffect } from "react";\nimport {\n  Button,\n  FormControl,\n  InputLabel,\n  Input,\n  FormHelperText,\n} from "@material-ui/core";\nimport firebase from "firebase";\n\nimport Todo from "./Todo";\nimport db from "./firebase";\n\nfunction App() {\n  const [todos, setTodos] = useState([]);\n  const [input, setInput] = useState("");\n\n  // when the app loads, we need to listen to firebase\n  // fetch new todos as they get added/removed\n  useEffect(() => {\n    // this fires when the app.js loads\n    // everytime the db changes, it snaps it and give you that snapshot\n    db.collection("todos")\n      .orderBy("timestamp", "desc")\n      .onSnapshot((snapshot) => {\n        // this gives back an array\n        setTodos(\n          snapshot.docs.map((doc) => ({\n            id: doc.id,\n            todo: doc.data().todo,\n          }))\n        );\n      });\n  }, []);\n\n  const addTodo = (event) => {\n    event.preventDefault();\n\n    db.collection("todos").add({\n      todo: input,\n      timestamp: firebase.firestore.FieldValue.serverTimestamp(),\n    });\n    // empty input after the todo is successfully stored in firebase\n    setInput("");\n  };\n\n  return (\n    <div className="App">\n      <h1>Hello World!!!</h1>\n      <form>\n        <FormControl>\n          <InputLabel>\n            <span role="img" aria-label="emoji">\n              \xe2\x9c\x85\n            </span>\n            Write a Todo\n          </InputLabel>\n          <Input value={input} onChange={(e) => setInput(e.target.value)} />\n          <FormHelperText>We\'ll make you productive</FormHelperText>\n        </FormControl>\n\n        <Button\n          disabled={!input}\n          type="submit"\n          variant="contained"\n          color="primary"\n          onClick={addTodo}\n        >\n          Add Todo\n        </Button>\n      </form>\n\n      <ul>\n        {todos.map((todo) => (\n          <Todo todo={todo} />\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport default App;\n

\n

Todo.js

\n

import React, { useState } from "react";\nimport {\n  List,\n  ListItem,\n  ListItemText,\n  ListItemAvatar,\n  Button,\n  Modal,\n} from "@material-ui/core";\nimport { makeStyles } from "@material-ui/core/styles";\n// import "./Todo.css";\n\nimport db from "./firebase";\n\nconst useStyles = makeStyles((theme) => ({\n  paper: {\n    position: "relative",\n    left: 400,\n    width: 600,\n    backgroundColor: theme.palette.background.paper,\n    boxShadow: theme.shadows[5],\n    padding: theme.spacing(2, 4, 3),\n  },\n  button: {\n    width: 150,\n    margin: "10px",\n  },\n}));\n\nconst Todo = (props) => {\n  const classes = useStyles();\n  const [open, setOpen] = useState(false);\n  const [input, setInput] = useState();\n\n  const handleOpen = () => {\n    setOpen(true);\n  };\n\n  const updateTodo = () => {\n    db.collection("todos").doc(props.todo.id).set(\n      {\n        todo: input,\n      },\n      // prevents you to overwrite/remove it, instead update it\n      { merge: true }\n    );\n    setOpen(false);\n  };\n  return (\n    <>\n      <Modal open={open} onClose={(e) => setOpen(false)}>\n        <div className={classes.paper}>\n          <h3>Update the Task</h3>\n          <input\n            placeholder={props.todo.todo}\n            value={input}\n            onChange={(e) => setInput(e.target.value)}\n          />\n          <Button\n            variant="contained"\n            color="default"\n            onClick={updateTodo}\n            className={classes.button}\n          >\n            Update \xe2\x9c\x94\n          </Button>\n        </div>\n      </Modal>\n      <List className="todo__list">\n        <ListItem>\n          <ListItemAvatar></ListItemAvatar>\n          <ListItemText\n            primary={props.todo.todo}\n            secondary="Uploaded Task  "\n          />\n        </ListItem>\n\n        <button onClick={(e) => setOpen(true)}>Edit</button>\n\n        <Button\n          onClick={(e) => db.collection("todos").doc(props.todo.id).delete()}\n        >\n          DELETE\n        </Button>\n      </List>\n    </>\n  );\n};\n\nexport default Todo;\n

\n

这些是我的依赖。

\n

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

\n

任何帮助都会非常有帮助。

\n

Answer 1

firebase由于版本更改，您必须使用新命令添加到您的应用程序中。 firebase 8 您可以在其官方网站https://firebase.google.com/docs/web/modular-upgradefirebase 9.0 找到有用的命令

之前：版本 8

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

之后：版本 9 兼容

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