反应 firebase 无法从 firebase-config.js 导入数据库

Question

我需要你的帮助。 我正在尝试从我已设置所有内容的 firebase-config.js 文件导入数据库。 但我收到此错误消息..

错误 in./src/App.js 7:0-32 找不到模块：错误：Package 路径。 未从 package /Users/ispasdaniel/Documents/react-firebase-todo-app/node_modules/firebase 导出（请参阅 /Users/ispasdaniel/Documents/react-firebase-todo-app/node_modules/firebase/package.json 中的导出字段)

这是我的 firebase-config.js

    // Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "*********",
  authDomain: "*********",
  projectId: "*********",
  storageBucket: "*********",
  messagingSenderId: "*********",
  appId: "*********",
};

// Use this to initialize the firebase App
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export { db };

这就是我将它导入我的 App.js 文件的方式

import React, { useState, useEffect } from "react";
import firebase from "firebase";
import "./App.css";
import { db } from "./firebase-config.js";

function App() {
  const [todoInput, setTodoInput] = useState("");

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

    db.collection("todos").add({
      inprogress: true,
      timestamp: firebase.firestore.FieldValue.serverTimeStamp(),
      todo: todoInput,
    });
  };

Answer 1

您可以直接从 Firestore Modular SDK 导入serverTimestamp() ，如下所示：

// Remove this import
// import firebase from "firebase";

import { serverTimestamp } from "firebase/firestore";

db.collection("todos").add({
  inprogress: true,
  timestamp: serverTimestamp(),
  todo: todoInput,
});

Answer 2

确保你已经安装了最新版本的 Firebase，你可以运行这个命令：

npm i firebase@latest

检查您的代码后，您在 firebase firebase-config.js （您使用 web 版本 9）和app.js （网络版本 8）中使用了两个不同的版本，这就是您遇到错误的原因。

您可以按照 Firebase 文档为 web version 9 添加文档，并使用@Dharmaraj 在直接导入serverTimestamp()中说明的内容：

// Remove this import
// import firebase from "firebase";
import { collection, addDoc, serverTimestamp } from "firebase/firestore";

const docRef = await addDoc(collection(db, "user"), {
  inprogress: true,
  timestamp: serverTimestamp(),
  todo: todoInput,
});