使用Webpack+Firestore的Web应用'request'模块找不到错误的解决方法

用Webpack搭建基于Firestore的Web应用时，运行npm run app出现Module not found: Error: Can't resolve 'request'错误，之前尝试过Babel和resolve.fallback处理polyfill问题但未解决，相关配置及错误信息如下：

我的package.json #

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib", // 执行这个显示编译成功，但不知道怎么运行应用？
    "app": "webpack" // 执行这个能运行应用，但会返回上述错误
  },
}

我的webpack.config.js #

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    fallback: {
      "fs": false,
      "tls": false,
      "net": false,
      "path": false,
      "zlib": false,
      "http": false,
      "https": false,
      "stream": false,
      "crypto": false,
      "crypto-browserify": false,
      "url": require.resolve("url"),
      "os": false,
      "os-browserify": false,
      "querystring": false,
      "buffer": false,
      "constants": false,
      "child_process": false
    },
},
  watch: true
};

完整错误信息 #

WARNING in ./node_modules/retry-request/index.js 76:21-39
Module not found: Error: Can't resolve 'request' in '<...>/public/node_modules/retry-request'
 @ ./node_modules/google-gax/build/src/streamingCalls/streaming.js 23:21-45
 @ ./node_modules/google-gax/build/src/fallback.js 33:20-57 54:18-55
 @ ./node_modules/@google-cloud/firestore/build/src/index.js 476:38-59 497:95-121 1511:15-43 468:46-86 1214:21-74
 @ ./node_modules/firebase-admin/lib/firestore/index.js 23:18-52
 @ ./src/index.js 2:25-60

解决方案 #

1. 替换服务端SDK为浏览器端SDK #

错误链中出现firebase-admin，这是Firebase的服务端专用SDK，无法在浏览器环境运行。必须改用浏览器端的firebase SDK：

• 卸载服务端SDK：

  npm uninstall firebase-admin
  

• 安装浏览器端SDK：

  npm install firebase
  

• 修改src/index.js的初始化代码（替换为你的Firebase项目配置）：

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    apiKey: "你的API密钥",
    authDomain: "你的Auth域名",
    projectId: "你的项目ID",
    storageBucket: "你的存储桶地址",
    messagingSenderId: "你的消息发送者ID",
    appId: "你的应用ID"
  };
  
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  

2. 修复Webpack的polyfill配置 #

之前的resolve.fallback把很多必要的浏览器polyfill设为false，导致依赖库找不到对应模块。按以下步骤调整：

• 安装所需的polyfill包：

  npm install stream-browserify buffer crypto-browserify os-browserify stream-http https-browserify browserify-zlib querystring-es3 constants-browserify process
  

• 更新webpack.config.js：

  const path = require('path');
  const webpack = require('webpack'); // 引入webpack核心模块
  
  module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
    },
    resolve: {
      fallback: {
        "fs": false,
        "tls": false,
        "net": false,
        "path": false,
        "zlib": require.resolve("browserify-zlib"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "stream": require.resolve("stream-browserify"),
        "crypto": require.resolve("crypto-browserify"),
        "url": require.resolve("url"),
        "os": require.resolve("os-browserify"),
        "querystring": require.resolve("querystring-es3"),
        "buffer": require.resolve("buffer"),
        "constants": require.resolve("constants-browserify"),
        "child_process": false
      },
      alias: {
        'crypto': 'crypto-browserify'
      }
    },
    plugins: [
      // 注入全局变量，解决部分库对Node.js全局变量的依赖
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
        process: 'process/browser'
      })
    ],
    watch: true
  };
  

3. 优化package.json的脚本命令 #

原来的build命令仅用Babel编译代码，未结合Webpack打包；app命令仅执行Webpack但没有开发服务器。调整为：

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production", // 生产环境打包生成dist/bundle.js
    "dev": "webpack serve --mode development" // 启动开发服务器，支持热重载
  }
}

• 若使用webpack serve，需先安装开发服务器：

  npm install webpack-dev-server --save-dev
  

4. （可选）Babel polyfill补充 #

如果仍有ES语法兼容问题，确保Babel配置正确：

• 安装依赖：

  npm install @babel/preset-env core-js@3 --save-dev
  

• 创建或修改.babelrc：

  {
    "presets": [
      ["@babel/preset-env", {
        "useBuiltIns": "usage",
        "corejs": 3
      }]
    ]
  }
  

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