Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
当前回答
我想这里的大部分答案都能解决你的问题。然而,如果你的节点开发不需要Polyfills,那么我建议在Webpack模块配置中使用target: 'node'。这帮我解决了这个问题。
这里有一些关于答案的文档:https://webpack.js.org/concepts/targets/
其他回答
看起来你已经使用了默认情况下不包含在webpack构建中的path包。对我来说,像这样扩展webpack配置有帮助:
{
// rest of the webpack config
resolve: {
// ... rest of the resolve config
fallback: {
"path": require.resolve("path-browserify")
}
},
}
也可以通过npm install path-browserify——save-dev或yarn添加path-browserify——dev来安装path-browserify。
方法1
开放项目/ node_modules react-scripts / config / webpack.config.js 在回退中添加"crypto": require.resolve("crypto-browserify")
resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify")
}
}
安装npm i crypto-browserify 重新启动应用程序。
如果你提交,上面的方法是无效的,因为我们不是node_modules
方法2
安装补丁包:纱线添加补丁包 安装所需的填料。(做一个应用程序的初始构建,它会告诉你。) 修改node_modules / react-scripts / config / webpack.config.js。举个例子。这是从Webpack的文档中截取的。
module.exports = {
//...
resolve: {
fallback: {
assert: require.resolve('assert'),
buffer: require.resolve('buffer'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
crypto: require.resolve('crypto-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
punycode: require.resolve('punycode'),
process: require.resolve('process/browser'),
querystring: require.resolve('querystring-es3'),
stream: require.resolve('stream-browserify'),
string_decoder: require.resolve('string_decoder'),
sys: require.resolve('util'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url'),
util: require.resolve('util'),
vm: require.resolve('vm-browserify'),
zlib: require.resolve('browserify-zlib'),
},
},
};
不要添加所有的,只添加你需要的。
在修改webpack之前,请确保先安装这些包 配置。
运行yarn patch-package react-scripts。这将生成一个补丁(这应该在你的回购中提交)。 向包中添加postinstall脚本。Json: "postinstall": "yarn patch-package"。现在,任何时候,有人在这个项目上安装npm deps,都会自动应用你在步骤3中创建的补丁。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "yarn patch-package"
},
当我重新安装节点模块时,我的webpack当前版本是5.38.1,我已经修复了这个问题 安装后,你必须更新你的webpack.config.js resolve{} with 回退:{"fs": false, "path": require.resolve("path-browserify")}而不使用"fs": false它显示错误,即:模块未找到:错误:无法解析'fs'在'/YOUR DIRECTORY…' 所以别忘了加上它;与其他东西看起来像:
module.exports = {
...
resolve: {
extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
fallback: {
"fs": false,
"path": require.resolve("path-browserify")
}
},
};
如果你的webpack.config.js文件中存在node属性,删除它
我的应用昨天也抛出了同样的错误。我花了几个小时在SO上阅读问题/答案,并尝试了一些。对我有用的是:
https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues
新的vue-cli升级(v5)就是这样。为了修复它(空模块的方式),你必须这样改变vue.config.js:
configureWebpack: (config) => {
config.resolve.fallback = {
...config.resolve.fallback,
// Include here the "empty" modules
url: false,
util: false,
querystring: false,
https: false,
};
}