Firebase9.0.2初始化后导入auth提示找不到firebase模块问题

你使用的是Firebase v9版本，该版本采用了全模块化的API设计，完全废弃了v8版本中直接导入全局firebase对象的写法，因此你代码中import firebase from 'firebase'的导入逻辑无法找到对应模块，触发报错。

方案1：使用兼容层快速适配（适合不想改动旧代码逻辑的场景） #

直接修改firebase.js的导入语句为v9提供的兼容包即可：

// 导入兼容层的app核心
import firebase from 'firebase/compat/app';
// 导入兼容层的auth服务
import 'firebase/compat/auth';

// 你的配置保持不变
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

// 初始化逻辑不变
firebase.initializeApp(firebaseConfig)
export const auth = firebase.auth();

注意：你原代码导出firebase.auth少了调用括号，这里修正为firebase.auth()

方案2：使用v9原生模块化API（推荐，打包体积更小、性能更好） #

完全适配v9的新语法，重写firebase.js：

// 导入核心初始化方法
import { initializeApp } from "firebase/app";
// 导入auth服务的获取方法
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_DATABASE_URL,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

// 初始化Firebase应用
const app = initializeApp(firebaseConfig);
// 初始化auth服务并导出
export const auth = getAuth(app);

额外检查项 #

如果修改后仍报错，先确认你已在项目根目录执行了依赖安装命令：
npm install firebase
或者用yarn的话执行：
yarn add firebase

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