我尝试在 webpack 5 中填充模块但没有工作（Reactjs）

Question

大家好，我是 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

此错误消息包含[=36=]

Crypto Http Https Stream

错误输出

编译为problems: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 Error Message

Answer 1

这看起来像是许多包（包括 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'),
        },
    },
};

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

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

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

GENERATE_SOURCEMAP=false

希望这对您有所帮助。

Answer 2

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

并安装依赖[=14=].

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 运行 start 或 yarn start

Answer 3

我通过输入

解决了这个问题

npm audit fix --force

Answer 4

我这样解决了我的问题：

npm uninstall react-scripts
npm install react-scripts@4.0.3

Answer 5

在 reactjs 的 webpack 5 中使用 polyfill 按照以下步骤操作：

首先安装 npm install node-polyfill-webpack-plugin 模块。（参考 link: https://www.npmjs.com/package/node-polyfill-webpack-plugin）
然后按照webpack.config.js --> node-module -> react-scripts -> config -> webpack.config.js
然后添加以下代码：

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
}

Answer 6

步骤 1) 添加 package.json "webpack": "^4.44.2" 步骤 2) 再次删除节点模块和 npm i 或 yarn install

关闭应用程序并再次运行，yarn start 或 npm start

我尝试在 webpack 5 中填充模块但没有工作（Reactjs）

i tried to Polyfill modules in webpack 5 but not working (Reactjs)

node.js

reactjs

webpack

moralis