未找到模块：无法解析“D:\gmail-react\src”中的“firebase”

Question

我安装了firebase，也登录了。

我在导入它时得到一个完全白屏。

这是 firebase.js 文件

import firebase from 'firebase'

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyBb9O35r_N--vwBZNfpxY3vZHzi4wH1oII",
    authDomain: "fir-237a1.firebaseapp.com",
    projectId: " fir-237a1",
    storageBucket: "fir-237a1.appspot.com",
    messagingSenderId: "1055799909510",
    appId: "1:1055799909510:web:c90fad7d5113500585c507"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = app.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();

export { db, auth, provider };

这是我导入 firebase、SendMail.js 文件的地方

import { db } from "./firebase.js"
import firebase from 'firebase';

function SendMail() {
    const { register, handleSubmit, watch, formState: { errors } } = useForm();
    const dispatch = useDispatch();

    const onSubmit = (formData) => {
        console.log(formData);
        db.collection('emails').add({
            to: formData.to,
            subject: formData.subject,
            message: formData.message,
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        });

        dispatch(closeSendMessage());
    };

Answer 1

如果文件是一个接一个的导入这里：

import { db } from "./firebase.js"

应该是这样的：

import { db } from "/firebase.js"

没有“.”。如果使用“。”该文件将在上面的文件夹中搜索，这就是它的样子。它转到了src 文件夹，女巫很可能在您的文件所在的文件夹上方。

还将您的 firebase.js 文件更新为：

import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyBb9O35r_N--vwBZNfpxY3vZHzi4wH1oII",
  authDomain: "fir-237a1.firebaseapp.com",
  projectId: " fir-237a1",
  storageBucket: "fir-237a1.appspot.com",
  messagingSenderId: "1055799909510",
  appId: "1:1055799909510:web:c90fad7d5113500585c507",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore();
const auth = getAuth();
const provider = new GoogleAuthProvider();

export { db, auth, provider };

并确保您使用最新的 Firebase JS SDK 版本 9.x

刚刚看到您的很多代码在 repo 中有旧的 SKD 8。您可以通过在新 SDK 中使用 compad 版本来保持该语法，或者重构您的代码以使用 SDK 版本 9 的新语法。这里是 migration guid。

您需要从这两个选项中选择一个。我会建议迁移到新版本。

使用新的 SDK 版本，您甚至不需要 firebase.js 文件。您的代码如下所示：

import { getFirestore, addDoc, collection } from "firebase/firestore";

function SendMail() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm();
  const dispatch = useDispatch();

  const onSubmit = (formData) => {
    console.log(formData);
    addDoc(collection(db, "emails"), {
      to: formData.to,
      subject: formData.subject,
      message: formData.message,
      timestamp: firebase.firestore.FieldValue.serverTimestamp(),
    });
  };

  dispatch(closeSendMessage());
}