React项目接入Firebase时模块多默认导出触发编译报错的咨询

我在React项目中已经通过Firebase完成了用户认证模块的配置，当前正在接入数据库服务。我的项目中firebase.js文件的代码如下：

import "firebase/auth";
import * as firebase from "firebase";

const firebaseConfig = {
    apiKey: "AIzaSyBR1E5loxQz_jA9YvG4HgNFq-nnHYunkkY",
    authDomain: "tryb-prints.firebaseapp.com",
    databaseURL: "https://tryb-prints.firebaseio.com",
    projectId: "tryb-prints",
    storageBucket: "tryb-prints.appspot.com",
    messagingSenderId: "333649716090",
    appId: "1:333649716090:web:27914b671376e870172cc3",
    measurementId: "G-YJG2RN7J95"
};


const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})

// 初始化Firebase
var fireDb = firebase.initializeApp(firebaseConfig);

export default fireDb.database().ref();
export const auth = app.auth;
export default app;

运行项目时上述代码直接触发报错。我清楚报错的触发逻辑，想要咨询是否可以在不新建独立模块的前提下实现多对象的导出效果，希望获得可行的实现方案参考。
报错信息如下：

编译失败

./src/firebase.js
  第32行:1:  解析错误：每个模块仅允许存在一个默认导出。

  30 | export default fireDb.database().ref();
  31 | export const auth = app.auth;
> 32 | export default app;
     | ^

可行实现方案 #

ES模块规则仅限制每个模块最多存在一个默认导出，完全支持在不新建独立模块的前提下，导出任意数量的对象，具体修正点如下：

• 移除重复的initializeApp调用，仅保留一次初始化，避免生成多个配置不一致的Firebase应用实例，导致后续认证、数据库权限不匹配的问题。配置可以根据实际需求选择硬编码值或环境变量，无需重复定义两套配置。
• 将所有需要多导出的对象改为命名导出，仅保留最多一个默认导出（如果有默认导出的兼容需求）。
• 修正原代码中auth导出的问题：原代码直接导出app.auth方法本身，需要调用方法生成认证实例后再导出。

修正后的完整firebase.js代码示例：

import "firebase/auth";
import * as firebase from "firebase";

// 仅保留一次Firebase初始化，统一使用环境变量配置
const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})

// 命名导出可支持任意数量的对象
export const auth = app.auth();
export const dbRef = app.database().ref();
// 仅保留一个默认导出，兼容原有依赖默认导入的逻辑
export default app;

导入方式 #

• 引入命名导出的auth、dbRef实例：

import { auth, dbRef } from './firebase'

• 引入默认导出的Firebase应用实例：

import app from './firebase'

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