使用Svelte+Vite引入Firebase报错：模块无default导出

在 Svelte 搭配 Vite 的项目中，通过 npm i firebase 安装 Firebase 后，使用以下代码导入：

import firebase from "firebase/app";
import "firebase/auth";

触发错误：

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/firebase_app.js?v=a3e48a6a' does not provide an export named 'default'

已尝试的操作：

• 安装并卸载不同版本的 Firebase
• 尝试多种 Firebase 导入方式

解决方法 #

方案1：使用 Firebase v9+ 官方推荐的模块化导入 #

Firebase v9及以上采用了树摇优化的模块化架构，不再提供默认导出，需改用命名导入：

// 导入核心模块
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// 填入你的 Firebase 项目配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  // 其他配置项...
};

// 初始化应用
const app = initializeApp(firebaseConfig);
// 获取认证实例
const auth = getAuth(app);

方案2：使用 compat 兼容模式适配旧代码 #

如果想保留原有语法结构，可以使用 Firebase 的兼容包：

// 替换为 compat 路径导入
import firebase from "firebase/compat/app";
import "firebase/compat/auth";

// 原有代码逻辑不变
const firebaseConfig = {
  // 你的项目配置
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

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