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

Question

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

ERROR in ./src/App.js 7:0-32 Module not found: Error: Package path . is not exported from package /Users/ispasdaniel/Documents/react-firebase-todo-app/node_modules/firebase (see exports field in /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-config.js（您使用的是网络版本 9）和 app.js（网络版本 8）中使用了两个不同的版本，这就是您遇到错误的原因。

您可以按照 adding a document for web version 9 中的 Firebase 文档，直接使用 @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,
});

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

react firebase cannot import db from firebase-config.js

javascript

firebase

reactjs

google-cloud-firestore