Electron引入Firebase提示undefined无法调用initializeApp如何解决

Firebase 9.x版本做了大规模API重构，拆分了两套导入入口：

• 代码中编写的import firebase from 'firebase/app'是v9新增的模块化API入口，这个入口没有默认导出，因此拿到的firebase变量值为undefined，调用initializeApp方法时自然会抛出读取undefined属性的错误。
• 当前使用的写法是Firebase 8及更早版本的命名空间式API写法，和v9默认入口的导出规则不匹配。
• electron-react-boilerplate默认开启ES模块严格导入校验，不会自动映射兼容层导出，不会像部分松散配置的项目那样隐式补全导入内容。

根据需要使用的API风格二选一即可：

方案1：使用兼容层写法（迁移成本最低，完全兼容现有代码逻辑） #

只需要修改导入路径为v9提供的v8兼容入口即可，其余业务代码不需要改动：

// 替换原有导入语句为compat路径
import firebase from 'firebase/compat/app';
// 如果后续需要使用auth、firestore等其他Firebase服务，也需要从compat路径导入
// 示例：
// import 'firebase/compat/auth';
// import 'firebase/compat/firestore';

const config = {
  /* Firebase控制台获取的实际配置 */
  /* 省略配置内容 */
};

const fire = firebase.initializeApp(config, 'default');

方案2：使用v9原生模块化API（官方推荐，支持tree-shaking，打包体积更小） #

放弃全局firebase对象的写法，按需导入用到的方法即可：

// 直接从模块化入口导入需要的initializeApp方法
import { initializeApp } from 'firebase/app';
// 其他服务也按需导入对应方法，示例：
// import { getAuth } from 'firebase/auth';
// import { getFirestore } from 'firebase/firestore';

const config = {
  /* Firebase控制台获取的实际配置 */
  /* 省略配置内容 */
};

const fire = initializeApp(config, 'default');

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