webpack打包后报错firebase_app__WEBPACK_IMPORTED_MODULE_0__未定义如何解决

报错成因 #

• 你本地安装的是Firebase 9.0及以上版本，该版本全面改用模块化API设计，废弃了v8及之前版本的全局命名空间导出逻辑，你使用的import firebase from "firebase/app"是旧版本写法，v9+默认不会导出该全局对象，因此打包后无法识别。
• 你webpack配置中开启了sideEffects: true，Firebase相关的无导出副作用导入（比如import "firebase/analytics"）会被webpack的tree shaking机制错误清理，导致依赖缺失。

修复方案 #

方案1：改用新版模块化API（推荐） #

直接适配Firebase v9+的官方推荐写法，替换原有导入和初始化逻辑即可：

// 导入所需模块
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getFirestore } from "firebase/firestore";

// 替换为你自己的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  projectId: "你的项目projectId",
  storageBucket: "你的项目storageBucket",
  messagingSenderId: "你的项目messagingSenderId",
  appId: "你的项目appId",
  measurementId: "你的项目measurementId"
};

// 初始化实例
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);

// 直接导出实例供业务代码调用即可
export { app, analytics, db }

方案2：兼容旧版v8写法 #

如果不想改动原有业务代码，可以使用Firebase提供的兼容包，同时调整webpack配置：

1. 替换导入语句为兼容包路径：

import firebase from "firebase/compat/app";
import "firebase/compat/analytics";
import "firebase/compat/firestore";

2. 修改webpack.config.js中的sideEffects配置，标记Firebase兼容包有副作用，避免被tree shaking清理：

optimization: {
  sideEffects: [
    "**/node_modules/firebase/compat/**/*.js",
    "**/*.css"
  ],
},

原有Firebase初始化和业务调用逻辑无需改动，即可正常运行。

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