Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
当前回答
所有其他答案都遗漏了一个重要的部分:如何不填充节点核心模块。 如果错误来自你的依赖项的依赖项中的某个模块,而你实际上并不需要,你可以完全忽略它。 在这种情况下,最简单的解决方法是添加到包中。Json这些行:
"browser": {
"fs": false,
"path": false,
"os": false
}
如果需要忽略其他核心节点模块,也可以这样做。
这种方法适用于默认情况下实际webpack配置不能直接访问的框架(比如Angular)。
在寻找不同的错误时,我已经找到了这个解决方案。
其他回答
我正在使用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;
},
},
}
对我来说,我只是删除了一个未使用的导入,称为:
import res from "express/lib/response"
它把它修好了!
我的环境是这样的:
React => v17 React脚本=> v5 Webpack => v5
要解决这个问题,请遵循下面的说明
1-安装以下软件包
yarn add fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired
2-在项目根目录下package.json旁边创建config-coverrides.js
添加以下代码:
const webpack = require('webpack'); module.exports = function override(config, env) { config.resolve.fallback = { url: require.resolve('url'), fs: require.resolve('fs'), 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'), buffer: require.resolve('buffer'), stream: require.resolve('stream-browserify'), }; config.plugins.push( new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'], }), ); return config; }
3-像下面这样修改packages.js
"脚本":{ “start”:“react-app-rewired start”, “build”:“react-app-rewired build”, “test”:“react-app-rewired test” "eject": "react-app-rewired eject" },
你需要React => v17 React脚本=> v5 webpack => v5
解决问题
1)安装
"fs": "^2.0.0", // npm i fs
"assert": "^2.0.0", // npm i assert
"https-browserify": "^1.0.0", // npm i https-browserify
"os": "^0.1.2", // npm i os
"os-browserify": "^0.3.0", // npm i os-browserify
"react-app-rewired": "^2.1.9", //npm i react-app-rewired
"stream-browserify": "^3.0.0", // stream-browserify
"stream-http": "^3.2.0", //stream-http
2)在根目录下创建config-override .js 图像
3)在config-override .js中添加配置
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
fs: require.resolve('fs'),
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'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
3)更改packages.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
问题解决了:)
Secret的答案几乎对我有用(我还没有足够的声誉来评论,抱歉!)
按照他们的回答,然后告诉我,因为在eslint的要求版本的差异,我应该添加SKIP_PREFLIGHT_CHECK=true到项目中的.env文件,所以我只是把它添加到我现有的一个。
然后它将成功构建(终于!)但后来我注意到,至少在Chrome中,我无法点击任何东西,甚至无法选择任何文本。事实证明,在检查器中仍然有一个Iframe在所有可以删除的东西之上。-这适用于运行一个开发版本,npm run start,我不确定它是否适用于生产版本。
我必须说,在我看来,这种突然的变化真的没有经过很好的考虑!