React+自定义Webpack集成Firebase时出现exports-loader错误

API 探路者

2026-8-25

问题原因与解决方案

核心问题

你的错误来自exports-loader版本兼容问题：Webpack 5配套的exports-loader v4+废弃了旧版的查询参数写法（?self.fetch），要求必须通过exports选项明确指定导出内容，否则会触发Schema验证错误。同时，Firebase依赖fetch，Webpack 5不再自动polyfill浏览器API，导致最初提示缺少exports-loader。

修复步骤

1. 修正webpack.ProvidePlugin的fetch配置

将原配置中的字符串写法改为数组形式，传入exports-loader的正确选项：

new webpack.ProvidePlugin({
  // 替换旧写法
  fetch: ['exports-loader', { exports: 'self.fetch' }, 'whatwg-fetch']
}),

2. （可选）移除不必要的fetch polyfill

如果你的项目不需要兼容IE等不支持fetch的旧浏览器，可以直接删除整个ProvidePlugin中的fetch配置——现代浏览器原生支持fetch，Firebase会自动使用环境中的fetch API，这样连exports-loader都可以卸载：

npm uninstall exports-loader whatwg-fetch

3. 确认Firebase 9的模块化导入正确

Firebase 9采用模块化设计，确保你的导入方式符合新版本规范：

// 初始化Firebase
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging';
import { getAnalytics } from 'firebase/analytics';

const firebaseConfig = {
  // 你的Firebase配置信息
};

const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);
const analytics = getAnalytics(app);