Webpack 5 收到 Polyfill 错误?!?!我的 JavaScript React 项目在尝试编译我的 webpack.config.js 文件时收到一个 polyfill 错误

Posted

技术标签:

【中文标题】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 【发布时间】:2021-05-21 03:29:54 【问题描述】:

我正在学习基于 React 的 Udemy 课程(这是 Brad Schiff 为我们其他人准备的 React 课程 here),我收到一个与 webpack 相关的错误,导致它无法编译。

我在尝试从我正在学习的 Udemy 课程中编译我的 webpack 文件时收到以下错误...这是我在终端上收到的错误图片: please view it here

这是错误的文本,但请查看链接以获取更多详细信息作为屏幕截图

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

【问题讨论】:

【参考方案1】:

他们已经在 webpack 5 中移除了自动 polyfills。我们必须自己包含它们。 更多信息here

【讨论】:

【参考方案2】:

通过查看错误堆栈,我们看到 ./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 行,使路径模块不需要。

【讨论】:

以上是关于Webpack 5 收到 Polyfill 错误?!?!我的 JavaScript React 项目在尝试编译我的 webpack.config.js 文件时收到一个 polyfill 错误的主要内容,如果未能解决你的问题,请参考以下文章

重大变化:webpack < 5 用于默认包含 node.js 核心模块的 polyfill

FS - 在 Webpack 5 上为 Electron 使用 FS

用于 node.js crypto-js 的 webpack 5 角度 polyfill

Gatsby / Webpack Polyfill 问题

找不到模块:错误:无法解析 webpack 中的“util”

使用 Webpack、Babel 和 React 的 IE11 中的语法错误