create-react-app引入pact-lang-api报Webpack polyfill错误如何解决

pact-lang-api依赖的eventsource库引用了Node.js原生的http、https核心模块，Webpack 5及以上版本不再默认自动注入Node.js核心模块的浏览器端兼容polyfill，编译时无法解析对应模块就会抛出该错误。
注：你当前依赖中声明的react-scripts版本为4.0.3，若实际安装时锁文件异常拉取了高版本react-scripts（内置Webpack5），就会触发该报错。

方案一：配置polyfill（推荐，无运行时风险） #

该方案通过补全浏览器端兼容的polyfill包解决模块缺失问题，不影响依赖库的正常功能调用。

• 安装缺失的polyfill依赖和配置覆写工具
  无需执行eject操作（eject是不可逆操作，会暴露所有webpack配置，后续维护成本高），使用react-app-rewired即可覆写内置webpack配置：

  npm install https-browserify stream-http react-app-rewired --save-dev
  

  如果使用yarn作为包管理工具，执行对应命令：

  yarn add https-browserify stream-http react-app-rewired --dev
  

• 在项目根目录（和package.json同级）新建config-overrides.js文件，写入以下配置补全webpack解析规则：

  module.exports = function override(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      http: require.resolve("stream-http"),
      https: require.resolve("https-browserify")
    };
    return config;
  };
  

• 修改package.json中的scripts启动命令，将原有的react-scripts调用替换为react-app-rewired：

  {
    "scripts": {
      "start": "react-app-rewired start",
      "build": "react-app-rewired build",
      "test": "react-app-rewired test",
      "eject": "react-scripts eject"
    }
  }
  

• 重新执行npm run start启动项目，编译报错即可消失。

方案二：空模块替换（仅适合特定场景） #

如果你确认项目中不会用到pact-lang-api里涉及HTTP/HTTPS网络请求的能力，可以直接将对应模块替换为空对象跳过编译，不需要安装polyfill包：

• 仅需安装react-app-rewired，config-overrides.js配置修改为：

  module.exports = function override(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      http: false,
      https: false
    };
    return config;
  };
  

• 其余scripts修改步骤和方案一一致。

  风险提示：该方案下如果代码运行到调用对应模块的逻辑，会直接抛出undefined相关的运行时错误，非必要不推荐使用。

• 如果执行完上述步骤仍有报错，先删除node_modules文件夹和锁文件（package-lock.json/yarn.lock），重新执行npm install安装依赖后再启动
• 不要随意升级/降级react-scripts版本，容易引发React 18和内置依赖的版本兼容问题

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