React 18项目中出现Cannot find module 'firebase/app'错误求助

我之前在其他应用中使用过Firebase，但这次在React 18项目的控制台出现错误，提示找不到firebase/app模块，相关报错出现在AuthContext.jsx和Firebase.js文件中，已经尝试卸载重装Firebase，问题仍未解决。

错误详情 #

编译错误 #

ERROR in ./src/Context/AuthContext.jsx 8:0-49
ERROR in ./src/Firebase.js 4:0-45

控制台错误栈 #

• 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)

相关代码文件 #

Firebase.js #

// 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

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

AuthContext.jsx #

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

解决方法 #

1. 彻底清理依赖并重装
   执行以下命令清除缓存和旧依赖，重新安装：

   rm -rf node_modules package-lock.json
   npm cache clean --force
   npm install
   

2. 清除Webpack缓存
   停止开发服务器后，删除React项目的Webpack缓存目录，再重启项目：

   rm -rf node_modules/.cache
   npm start
   

3. 验证导入方式兼容性
   临时切换到Firebase兼容模式导入，确认是否为模块解析问题：

   // 修改Firebase.js的导入逻辑
   import firebase from 'firebase/compat/app';
   import 'firebase/compat/auth';
   import 'firebase/compat/firestore';
   
   const app = firebase.initializeApp(firebaseConfig);
   export const auth = firebase.auth(app);
   export const db = firebase.firestore(app);
   

   如果此写法正常运行，说明原模块化导入存在环境解析问题，后续可切回v9写法，同时检查项目Babel/Webpack配置是否支持ES模块。

4. 检查环境变量配置
   确认.env文件放在项目根目录，变量名前缀为REACT_APP_，且无多余空格：

   REACT_APP_FIREBASE_API_KEY=你的密钥
   REACT_APP_FIREBASE_AUTH_DOMAIN=你的域名
   # 其他Firebase配置变量
   

5. 更新react-scripts版本
   当前react-scripts版本为5.0.1，尝试更新到最新版本，修复工具链兼容性问题：

   npm install react-scripts@latest
   

内容的提问来源于stack exchange，提问作者emredogramaci