Webpack 5 收到 Polyfill 错误?!?!我的 JavaScript React 项目在尝试编译我的 webpack.config.js 文件时收到 polyfill 错误
Webpack 5 Receiving a Polyfill Error?!?! My JavaScript React project is receiving a polyfill error while trying to compile my webpack.config.js file
我正在上 Udemy 的课程(这是 Brad Schiff 的 React for the Rest of Us course here),该课程基于 React,我收到一个与 webpack 相关的错误,导致它无法编译.
我在尝试从我正在参加的 Udemy 课程编译我的 webpack 文件时收到以下错误...这是我在终端上收到的错误的图片:
please view it here
这是错误的文本,但是 请查看 link 以获取更多详细信息作为屏幕截图:
Module not found: Error: Can't resolve 'path' in '/Users/seanmodd/Development/2021/BradSchiff/Frontend/node_modules/webpack/lib/util'
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: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/webpack/lib/CleanPlugin.js 12:17-37
@ ./node_modules/webpack/lib/index.js 115:9-33
@ ./node_modules/dotenv-webpack/dist/index.js 12:15-33
@ ./node_modules/dotenv-webpack/browser.js 1:13-38
@ ./app/components/HomeGuest.js 5:15-40
@ ./app/Main.js 8:0-47 38:96-105
他们已经删除了 webpack 5 中的自动 polyfills。我们必须自己包含它们。
更多信息 here
通过查看错误堆栈,我们看到 ./app/components/HomeGuest.js
第 15 行需要 path
模块。
如果你真的需要客户端的path
模块,你必须在webpack配置文件中添加:
module.exports = {
// ... your config
resolve: {
fallback: {
path: require.resolve("path-browserify")
}
}
}
另外,安装 path-browserify
模块 (npm install path-browserify
)。
但是,你可能在客户端不需要这个模块,然后修复是编辑HomeGuest.js文件第15行,这样不需要路径模块。
运行 npm install node-polyfill-webpack-plugin
在您的终端`
转到您的 webpack.config.js 并粘贴此内容:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
// Other rules like entry, output, devserver....,
plugins: [
new NodePolyfillPlugin()
]}
这应该可以修复它,他们删除了 webpack 5 中的自动 polyfill,这就是为什么降级 web3 版本也会修复它
我正在上 Udemy 的课程(这是 Brad Schiff 的 React for the Rest of Us course here),该课程基于 React,我收到一个与 webpack 相关的错误,导致它无法编译.
我在尝试从我正在参加的 Udemy 课程编译我的 webpack 文件时收到以下错误...这是我在终端上收到的错误的图片: please view it here
这是错误的文本,但是 请查看 link 以获取更多详细信息作为屏幕截图:
Module not found: Error: Can't resolve 'path' in '/Users/seanmodd/Development/2021/BradSchiff/Frontend/node_modules/webpack/lib/util'
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: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
@ ./node_modules/webpack/lib/CleanPlugin.js 12:17-37
@ ./node_modules/webpack/lib/index.js 115:9-33
@ ./node_modules/dotenv-webpack/dist/index.js 12:15-33
@ ./node_modules/dotenv-webpack/browser.js 1:13-38
@ ./app/components/HomeGuest.js 5:15-40
@ ./app/Main.js 8:0-47 38:96-105
他们已经删除了 webpack 5 中的自动 polyfills。我们必须自己包含它们。 更多信息 here
通过查看错误堆栈,我们看到 ./app/components/HomeGuest.js
第 15 行需要 path
模块。
如果你真的需要客户端的path
模块,你必须在webpack配置文件中添加:
module.exports = {
// ... your config
resolve: {
fallback: {
path: require.resolve("path-browserify")
}
}
}
另外,安装 path-browserify
模块 (npm install path-browserify
)。
但是,你可能在客户端不需要这个模块,然后修复是编辑HomeGuest.js文件第15行,这样不需要路径模块。
运行 npm install node-polyfill-webpack-plugin
在您的终端`
转到您的 webpack.config.js 并粘贴此内容:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
// Other rules like entry, output, devserver....,
plugins: [
new NodePolyfillPlugin()
]}
这应该可以修复它,他们删除了 webpack 5 中的自动 polyfill,这就是为什么降级 web3 版本也会修复它