Electron使用Electron Forge+Webpack5集成Firebase Firestore与Storage报错如何解决

开发者阿泽

2026-10-2

报错截图

解决方案

1. 补全Webpack 5 Node核心模块polyfill

Webpack 5默认不再自动提供Node.js核心模块的浏览器侧polyfill，Firebase Firestore、Storage依赖crypto、stream、buffer等核心模块，需在Webpack配置中新增对应配置：
首先安装依赖包：

npm install crypto-browserify stream-browserify path-browserify os-browserify buffer process

修改webpack.config.js配置：

const webpack = require('webpack')

module.exports = {
  // 保留原有配置不变
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "path": require.resolve("path-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "buffer": require.resolve("buffer/"),
      "fs": false,
      "net": false,
      "tls": false
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ]
}

2. 修正CSP安全规则

当前的CSP配置缺少Firestore实时连接、Storage资源访问所需的源规则，调整Content-Security-Policy字段如下：

"Content-Security-Policy": [
  "default-src 'self' 'unsafe-eval' 'unsafe-inline' http://localhost:9099/ https://*.googleapis.com https://*.firebaseio.com https://*.firestore.googleapis.com https://*.storage.googleapis.com https://*.firebaseapp.com; object-src 'self'; img-src 'self' data: https://*.storage.googleapis.com; connect-src 'self' http://localhost:9099/ https://*.googleapis.com wss://*.firestore.googleapis.com wss://*.firebaseio.com https://*.storage.googleapis.com;"
],

新增规则覆盖了Firestore WebSocket连接、Storage对象存储资源访问的需求，避免请求被CSP拦截。