5

大家好，我是 React 的新手，当我开始我的项目时，我收到 Wepback V5 错误消息

解决更新：https ://github.com/facebook/create-react-app/issues/11756#issuecomment-1001162736

这是在用什么！

Os: Win11
Node : v16
React:v17
React-script : v5
Webpack:v5

此错误消息包含

Crypto
Http
Https
Stream

错误输出

编译有问题：X

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

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\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-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\web3-eth-accounts\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-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\PC\Desktop\Portfolio\portfolio_app\node_modules\web3-eth-accounts\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 }

图像包含输出

Webpack5 错误信息

4

3 回答 3

6

我解决了这些错误，但我的应用程序没有呈现。如果您有兴趣清除这些错误，您可以将代码直接粘贴到your-project/node_modules/react-scripts/config/webpack.config.js其中，但这些更改可以在重建您的应用程序后被覆盖。在 module.exports 对象中找到 resolve 并写回退，在你的情况下它是 "crypto": require.resolve("crypto-browserify")。

并安装依赖npm install crypto-browserify。

resolve: {
//   fallback: {
//     "fs": false,
//     "tls": false,
//     "net": false,
//     "http": require.resolve("stream-http"),
//     "https": false,
//     "zlib": require.resolve("browserify-zlib") ,
//     "path": require.resolve("path-browserify"),
//     "stream": require.resolve("stream-browserify"),
//     "util": require.resolve("util/"),
       "crypto": require.resolve("crypto-browserify")
}

或者您可以使用 react-app-rewired 添加回退，如 Github https://github.com/facebook/create-react-app/issues/11756中所述 安装 react-app-rewired，config-overrides.js在项目的根目录中创建文件. 我在文件中的代码

module.exports = function override (config, env) {
    console.log('override')
    let loaders = config.resolve
    loaders.fallback = {
        "fs": false,
        "tls": false,
        "net": false,
        "http": require.resolve("stream-http"),
        "https": false,
        "zlib": require.resolve("browserify-zlib") ,
        "path": require.resolve("path-browserify"),
        "stream": require.resolve("stream-browserify"),
        "util": require.resolve("util/"),
        "crypto": require.resolve("crypto-browserify")
    }
    
    return config
}

在 package.json 中将脚本从 更改 'start': 'react-scripts start' 为 'start': 'react-app-rewired start'。然后启动项目 npm run start 或 yarn start

于 2021-12-26T08:55:43.047 回答
2

对于包括 web3 在内的许多包来说，这看起来像是一个新问题，因为它们与 Webpack v5 不兼容，而不为 polyfils 添加回退。

此处指出的问题：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'),
        },
    },
};

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

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

这已通过添加到我的 .env 文件中解决；

GENERATE_SOURCEMAP=false

希望这可以帮助。

于 2021-12-21T09:05:28.440 回答
-1

看一看。如果它可以帮助任何人

https://namespaceit.com/blog/how-fix-break-change-webpack-5-used-to-include-polyfills-for-nodejs-core-modules-by-default-error

于 2021-12-27T11:56:36.190 回答