Estoy instalado firebase conectado también.
Obtengo una pantalla completamente blanca al importarla.
Este es el archivo 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 };Aquí es donde estoy importando firebase, archivo 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()); };Si los archivos son uno por otro la importación aquí:
import { db } from "./firebase.js"Debería ser así:
import { db } from "/firebase.js" sin el ".". Si usa el "." el archivo se buscará en la carpeta de arriba y así es como se ve. Fue a la carpeta src que es probable que esté encima de la carpeta donde se encuentra su archivo.
También actualice su archivo firebase.js a esto:
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 };y asegúrese de usar la última versión 9.x del SDK de Firebase JS
Acabo de ver que gran parte de su código tiene el antiguo SKD 8 en el repositorio. Puede quedarse con esa sintaxis usando la versión compad en el nuevo SDK o refactorizar su código para usar la nueva sintaxis de la versión 9 del SDK. Aquí hay una guía de migración .
Tienes que elegir una de esas dos opciones. Recomendaría migrar a la nueva versión.
Con la nueva versión del SDK, ni siquiera necesita el archivo firebase.js . Su código se vería así:
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()); }