Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
当前回答
Secret的答案几乎对我有用(我还没有足够的声誉来评论,抱歉!)
按照他们的回答,然后告诉我,因为在eslint的要求版本的差异,我应该添加SKIP_PREFLIGHT_CHECK=true到项目中的.env文件,所以我只是把它添加到我现有的一个。
然后它将成功构建(终于!)但后来我注意到,至少在Chrome中,我无法点击任何东西,甚至无法选择任何文本。事实证明,在检查器中仍然有一个Iframe在所有可以删除的东西之上。-这适用于运行一个开发版本,npm run start,我不确定它是否适用于生产版本。
我必须说,在我看来,这种突然的变化真的没有经过很好的考虑!
其他回答
当从webpack v4升级到v5时,我也得到了这些错误。 通过对webpack.config.js进行以下更改来解决
添加的决心。回退财产
删除节点属性
{
resolve: {
modules: [...],
fallback: {
"fs": false,
"tls": false,
"net": false,
"path": false,
"zlib": false,
"http": false,
"https": false,
"stream": false,
"crypto": false,
"crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
}
},
entry: [...],
output: {...},
module: {
rules: [...]
},
plugins: [...],
optimization: {
minimizer: [...],
},
// node: {
// fs: 'empty',
// net: 'empty',
// tls: 'empty'
// },
}
从v4升级到v5 => https://webpack.js.org/migrate/5/#clean-up-configuration
使用node-polyfill-webpack-plugin重新添加对Node.js核心模块的支持:
安装包后,将以下内容添加到webpack.config.js中:
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = {
// Other rules...
plugins: [
new NodePolyfillPlugin()
]
}
Secret的答案几乎对我有用(我还没有足够的声誉来评论,抱歉!)
按照他们的回答,然后告诉我,因为在eslint的要求版本的差异,我应该添加SKIP_PREFLIGHT_CHECK=true到项目中的.env文件,所以我只是把它添加到我现有的一个。
然后它将成功构建(终于!)但后来我注意到,至少在Chrome中,我无法点击任何东西,甚至无法选择任何文本。事实证明,在检查器中仍然有一个Iframe在所有可以删除的东西之上。-这适用于运行一个开发版本,npm run start,我不确定它是否适用于生产版本。
我必须说,在我看来,这种突然的变化真的没有经过很好的考虑!
在create-react-app v17和脚本5.0.0中,你需要在webpack.config.js中添加一个备份,并安装'process'。
`module.exports = function (webpackEnv) {
.........
return {
.........
resolve: {
..........
fallback: { "process": require.resolve("process/browser") },`
所有其他答案都遗漏了一个重要的部分:如何不填充节点核心模块。 如果错误来自你的依赖项的依赖项中的某个模块,而你实际上并不需要,你可以完全忽略它。 在这种情况下,最简单的解决方法是添加到包中。Json这些行:
"browser": {
"fs": false,
"path": false,
"os": false
}
如果需要忽略其他核心节点模块,也可以这样做。
这种方法适用于默认情况下实际webpack配置不能直接访问的框架(比如Angular)。
在寻找不同的错误时,我已经找到了这个解决方案。