安装pact-lang-api后Webpack/polyfill出错

Question

在尝试连接刚刚使用 create-react-app 创建的 React 前端时，在将 pact-lang-api 导入应用程序后运行 npm run start 时收到此错误消息：

ERROR in ./node_modules/eventsource/lib/eventsource.js 5:12-28 Module not found: Error: Can't resolve 'https' in '/src/node_modules/eventsource/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
install 'https-browserify' 

If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/eventsource/lib/eventsource.js 7:11-26 Module not found: Error: Can't resolve 'http' in '/src/node_modules/eventsource/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
install 'stream-http' 

If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

webpack compiled with 2 errors and 2 warnings

我的依赖项如下所示：

{
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.8.3",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "pact-lang-api": "^4.3.3",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^2.1.4"
  }

我该如何解决这个问题？ 预先感谢您的帮助！

Answer 1

错误提示要安装

stream-http

和

https-browserify

。

尝试

npm i stream-http https-browserify

Answer 2

我自己按照解决方案解决了这个问题 https://alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5。

请注意，本文的目标是解决由 web3.js 包而不是 pact-lang-api 创建的此问题。对于 pact-lang-api，您还需要添加 url 和 util 包，以便您的最终配置覆盖文件看起来像...

const webpack = require("webpack");
module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    crypto: require.resolve("crypto-browserify"),
    stream: require.resolve("stream-browserify"),
    assert: require.resolve("assert"),
    http: require.resolve("stream-http"),
    https: require.resolve("https-browserify"),
    os: require.resolve("os-browserify"),
    url: require.resolve("url"),
    util: require.resolve("util"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

本文中的解决方案不包括

url: require.resolve("url")

或

util: require.resolve("util")

，但您将需要两者。

Answer 3

解决方案是安装它所说的文件，但是如何将这些文件用于使用 create-react-app 编写的代码并不在消息中。

您需要使用辅助库来修改 webpack。

0. 安装它所说的库

npm install stream-http
npm install https-browserify

1. 安装react-app-rewired（例如

   npm install react-app-rewired

   ）
2. 在根文件夹（不是 src 文件夹）中创建 config-overrides.js
3. 将其添加到其中

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

4. 在

   package.json

   中更新您的脚本以使用react-app-rewired而不是react-scripts。例如

    "start": "react-app-rewired start",
    "build": "react-app-rewired build"