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

Question

我正在 Udemy 上学习一门基于 React 的课程（这是 Brad Schiff 的 React for the Rest of Us 课程这里），我收到了一个与 webpack 相关的错误，导致它无法编译。

当我尝试从我正在学习的 Udemy 课程编译 webpack 文件时，出现以下错误...这是我在终端上收到的错误的图片： 请在这里查看

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

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

Answer 1

在终端中运行

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 中删除了自动填充，这就是为什么降级 web3 版本也可以解决这个问题

Answer 2

他们在 webpack 5 中删除了自动填充。我们必须自己包含它们。 更多信息这里

Answer 3

通过查看错误堆栈，我们发现

./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 行，使路径模块不再需要。

Answer 4

1. npm 安装react-app-rewired

2. 安装提到的polyfill，在你的情况下是path-browserify

3. 创建一个 config-overrides.js 文件：并粘贴以下内容：

const webpack = require("webpack");
module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    path: require.resolve("path-browserify"),
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ]);
  return config;
};

4. 在package.json中，更改脚本如下： “脚本”：{ "start": "react-app-rewired 启动", "build": "react-app-rewired 构建", "test": "react-app-rewired 测试", "eject": "react-scripts 弹出" },

按照以下步骤操作，最后执行 npm start 即可解决问题。