Module not found: Can't resolve 'firebase' in 'D:\gmail-react\src'-CodePudding

I am installed firebase logged in as well.

I am getting a completely white screen on importing it.

This is the firebase.js file

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 };

This is where I am importing firebase, SendMail.js file

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());
    };

CodePudding user response：

If the files are one by another the import here:

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

Should be like this:

import { db } from "/firebase.js"

without the ".". If you use the "." the file will be searched in the folder above and that is how it looks like. It wen to the src folder witch is probable above the one where your file is.

Also update your firebase.js file to this:

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 };

and make sure you use the latest Firebase JS SDK Version 9.x

A just saw that a lot of your code has the old SKD 8 in the repo. You can either stay with that syntax by using the compad version in the new SDK or refactor your code to use the new syntax of SDK version 9. Here is a migration guid.

You need to pick one of those two options. I would recommend to migrate to the new version.

With the new SDK version you don't even need the firebase.js file. Your code would look like this:

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());
}