Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?

break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。


当前回答

我尝试了这个https://stackoverflow.com/a/71803628/15658978解决方案,它解决了我的问题。

简单地运行以下2个命令

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

其他回答

对于我(使用React => v17;React脚本=> v5;webpack => v5),由@Letton和@Richie Bendall建议的解决方案组合与另一个附加,即包一起工作。Json中,必须添加并安装以下包。还请注意fs版本“^2.0.0”抛出一个错误,因此更改为“0.0.1-security”。

"assert": "^2.0.0", 
"https-browserify": "^1.0.0", 
"os": "^0.1.2",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.1.9",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"fs":"^0.0.1-security",
"crypto-browserify": "3.12.0",
"buffer":"^6.0.3",
"node-polyfill-webpack-plugin": "^2.0.1"

安装完这些后,执行剩下的步骤,即将config-override .js添加到根目录,并更改包中的脚本内容。从react-scripts到react-app-rewired的Json修复了这个问题。

我找到了一个适合我的解决方案:

卸载webpack 删除“package-lock”。json”文件 NPM安装webpack@4.44.2——force 包括在“套餐”中。Json”文件在你的“脚本”: "脚本":{ "start": "SET NODE_OPTIONS=——openssl-legacy-provider && react-scripts start", "SET NODE_OPTIONS=——openssl-legacy-provider && react-scripts build", “test”:“react-scripts test”, "eject": "react-scripts eject" }

面对同样的问题,这里有一个解决方案:

删除package-lock。Json从项目文件夹和NPM卸载webpack 将react-script从5降级为4.0.3 确保包锁。Json被删除/删除 使用npm Install webpack@4.44.2安装webpack 最后,使用终端运行npm install

我正在使用craco的create-react-app,在升级到webpack 5时遇到了以下错误:

“缓冲”


Module not found: Error: Can't resolve 'buffer' in '/Users/therightstuff/my-project/node_modules/safe-buffer'

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: { "buffer": require.resolve("buffer/") }'
    - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "buffer": false }

这个问题通过安装npm install -D buffer来解决。

'fs'


Module not found: Error: Can't resolve 'fs' in '/Users/therightstuff/my-project/node_modules/line-navigator'

这个问题通过在craco配置craco.config.js中设置webpack回退来解决:

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}

我想这里的大部分答案都能解决你的问题。然而,如果你的节点开发不需要Polyfills,那么我建议在Webpack模块配置中使用target: 'node'。这帮我解决了这个问题。

这里有一些关于答案的文档:https://webpack.js.org/concepts/targets/