Webpack 5 Receiving a Polyfill Error??.. 我的 JavaScript React 項目在嘗試編譯我的 webpack.config.js 文件時收到一個 polyfill 錯誤

Question

我正在上一門基於 React 的 Udemy 課程（這是 Brad Schiff 的 Rest of Us 課程的React），它是基於 React 的，我收到了一個與 webpack 相關的錯誤，這導致它無法編譯。

當我嘗試從我正在參加的 Udemy 課程編譯我的 webpack 文件時出現以下錯誤...這是我在終端上收到的錯誤圖片：請在此處查看

這是錯誤的文本，但請查看鏈接以獲取更多詳細信息作為屏幕截圖 n.netheless ：

 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

go 到您的 webpack.config.js 並粘貼：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = {
// Other rules like entry, output, devserver....,
plugins: [
    new NodePolyfillPlugin()
]}

這應該可以修復它，他們刪除了 webpack 中的自動 polyfills 5 這就是為什么降級 web3 版本也會修復它

Answer 2

他們在 webpack 5 中刪除了自動 polyfills。我們必須自己包含它們。 更多信息在這里

Answer 3

通過查看錯誤堆棧，我們看到./app/components/HomeGuest.js第 15 行需要path模塊。

如果你真的需要客戶端的path模塊，你必須在 webpack 配置文件中添加：

module.exports = {
  // ... your config
  resolve: {
    fallback: {
      path: require.resolve("path-browserify")
    }
  }
}

並且，安裝path-browserify browserify 模塊（ npm install path-browserify ）。

但是，您可能在客戶端不需要此模塊，然后修復是編輯 HomeGuest.js 文件第 15 行，這樣就不需要路徑模塊了。