找不到模块：无法解析"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 Version 9.x

A刚刚看到你的很多代码在仓库中都有旧的SKD 8。您可以通过在新SDK中使用compad版本来保留该语法，或者重构代码以使用SDK版本9的新语法。这是一个迁移指南。

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

使用新的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());
}