I already used Firebase on another app recently. But this time I'm getting that error on console.

It's throwing this error on page

ERROR in ./src/Context/AuthContext.jsx 8:0-49

ERROR in ./src/Firebase.js 4:0-45

and this on console

• bundle.js:1861 Uncaught Error: Cannot find module 'firebase/app'
• at webpackMissingModule (bundle.js:1861:50)
• at ./src/Firebase.js (bundle.js:1861:137)
• at options.factory (bundle.js:126646:31)
• at webpack_require (bundle.js:126092:33)
• at fn (bundle.js:126303:21)
• at ./src/Context/AuthContext.jsx (bundle.js:1641:67)
• at options.factory (bundle.js:126646:31)
• at webpack_require (bundle.js:126092:33)
• at fn (bundle.js:126303:21)
• at ./src/App.js (bundle.js:20:78)

This is my Firebase.js file

// Import the functions you need from the SDKs you need

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// 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: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

// Initialize Firebase

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

export default app;

And this provider context file

import { createContext, useContext, useState, useEffect } from "react";
import { auth, db } from "../Firebase";
import { doc, setDoc } from "firebase/firestore";
import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";

const UserContext = createContext();

export const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState({});

  const signUp = (email, password) => {
    createUserWithEmailAndPassword(auth, email, password);
    return setDoc(doc(db, "users", email), {
      favList: [],
    });
  };
  const signIn = (email, password) => {
    return signInWithEmailAndPassword(auth, email, password);
  };

  const logout = () => {
    return signOut(auth);
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
    });
    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <UserContext.Provider value={{ signUp, signIn, logout, user }}>
      {children}
    </UserContext.Provider>
  );
};

export const UserAuth = () => {
  return useContext(UserContext);
};

package.json

{
  "name": "cryptotracker-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.3.1",
    "dompurify": "^2.4.3",
    "firebase": "^9.17.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-router-dom": "^6.8.0",
    "react-scripts": "5.0.1",
    "react-sparklines": "^1.7.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tailwindcss": "^3.2.4"
  }
}

I tried most of things like uninstall and install but they didn't work.

CodePudding user response：

I am also getting the same error,but after removing the firebase version 9.17.0 and reinstalling firebase with its 9.16.0 vesrion all the error has been resolved. Latest version of firebase might be unstable.