Webpack 5 错误 - 无法解析 ReactJS 项目中的“crypto”、“http”和“https”

Question

我使用 Webpack 5 创建了一个新的 React 项目，npx create-react-app client并遇到了一些问题。最初，我在 、 和 方面遇到了错误assert，os但stream通过安装它们并将它们包含在webpack.config.js. 该文件位于client/src文件夹中。

错误如下所示：

Compiled with problems:

    ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

    Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Username\Projects\testProject\client\node_modules\eth-lib\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: { "crypto": require.resolve("crypto-browserify") }'
        - install 'crypto-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "crypto": false }

=================================================================

    ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

    Module not found: Error: Can't resolve 'http' in 'C:\Users\Username\Projects\testProject\client\node_modules\web3-providers-http\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 }

=================================================================

    ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

    Module not found: Error: Can't resolve 'https' in 'C:\Users\Username\Projects\testProject\client\node_modules\xhr2-cookies\dist'

    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 }

代码

这就是我的webpack.config.js文件现在的样子。

module.exports = {
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      crypto: require.resolve('crypto-browserify'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      stream: require.resolve('stream-browserify'),
    },
  },
};

下面是我的package.json文件。

{
  "dependencies": {
    "assert": "^2.0.0",
    "crypto-browserify": "^3.12.0",
    "dotenv": "^10.0.0",
    "https-browserify": "^1.0.0",
    "os": "^0.1.2",
    "stream": "^0.0.2",
    "stream-http": "^3.2.0"
  }
}

从上面可以看出，我已经安装了错误（crypto-browserify、stream-http和https-browserify）中建议的软件包，并将它们包含在webpack.config.js文件中。然而，错误仍然存​​在。

我该如何解决这个问题？

Answer 1

以某种方式也使用react-app-rewired修复了它确保安装此包并在根目录中创建新文件config-overrides.js

/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
    //do stuff with the webpack config...

    config.resolve.fallback = {
        url: require.resolve('url'),
        assert: require.resolve('assert'),
        crypto: require.resolve('crypto-browserify'),
        http: require.resolve('stream-http'),
        https: require.resolve('https-browserify'),
        os: require.resolve('os-browserify/browser'),
        buffer: require.resolve('buffer'),
        stream: require.resolve('stream-browserify'),
    };
    config.plugins.push(
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer'],
        }),
    );

    return config;
}

现在编辑你的 package.json 以使react-app-rewired正常工作。

//包.json

 "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "buffer": "^6.0.3",
    "crypto": "npm:crypto-browserify",
    "crypto-browserify": "^3.12.0",
    "https-browserify": "^1.0.0",
    "os-browserify": "^0.3.0",
    "react": "^17.0.2",
    "react-app-rewired": "^2.1.9",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "rewire": "^6.0.0",
    "stream": "npm:stream-browserify",
    "stream-browserify": "^3.0.0",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

Answer 2

我找到的另一种解决方案是降级到webpack@4.46.0和，而不是使用 Webpack 5 react-scripts@4.0.3。这就是我现在将使用的，直到找到更好的解决方案。

Answer 3

这看起来像是许多包（包括 web3）的新问题，因为如果不添加 Polyfils 的后备，这些包与 Webpack v5 不兼容。

这里指出的问题：https ://github.com/facebook/create-react-app/issues/11756

我通过将后备添加到 webpack.config.js 文件中解决了这个问题；

module.exports = {
    resolve: {
        fallback: {
            assert: require.resolve('assert'),
            crypto: require.resolve('crypto-browserify'),
            http: require.resolve('stream-http'),
            https: require.resolve('https-browserify'),
            os: require.resolve('os-browserify/browser'),
            stream: require.resolve('stream-browserify'),
        },
    },
};

使用;

"dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2",
    "web3": "^1.6.1"
  },

但还需要但在构建过程中出现编译错误：

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error

通过添加到我的 .env 文件解决了这个问题；

GENERATE_SOURCEMAP=false