重大变更：webpack < 5 默认包含 Node.js 核心模块的 polyfill

Question

我正在尝试在 Laravel/Vue.js 应用程序中使用 Socket.io。但我在运行时遇到此错误npm run dev。

Module not found: Error: Can't resolve 'path' in '/home/nicolas/LaravelProjects/Chess/node_modules/socket.io/dist'

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 }

webpack compiled with 9 errors

我尝试通过添加来更改 webpack.config.js 文件resolve.fallback: { "path": false }，但它似乎没有帮助。我可能做错了，因为我的项目中有 4 个 webpack.config.js 文件（我不知道为什么）。

也许我可以降级 webpack 吗？谢谢！

Answer 1

这个修复对我有用（Vue 3）：

1. 在 vue.config.js 中添加：

const { defineConfig } = require('@vue/cli-service')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin()
    ]
  }

})

2. 其次是npm install node-polyfill-webpack-plugin

Answer 2

我在 ReactJS 中使用 create-react-app(facebook) 但其他包 (crypto-browserify) 遇到了这个问题

解决方案：

1. 首先在这个问题“path-browserify”中安装必要的软件包，但在我的例子中“crypto-browserify”

2. 使用 create-react-app 修改reactjs中的webpack.config.js，该文件位于其中：

node_modules/react-scripts/config/webpack.config.js

• 搜索 module.exports 并在该函数内有一个返回：

module.exports = function (webpackEnv) {
  ...
  return {
   ...
    resolve: {
      ...
      fallback: {
        // Here paste
        path: require.resolve("path-browserify"),
        // But in mi case I paste
        crypto: require.resolve("crypto-browserify"),

      }
    }
  }
}

注意：此解决方案有效，但是当 webpack 项目启动时它会显示警告

Pd：我的母语不是英语，但我希望理解我。

Answer 3

我在使用 Mongo 的 Real (realm-web) 的 React (2022 年 2 月) 中遇到了同样的问题。

我分两步解决这个问题：

1. npm i stream-browserify crypto-browserify
2. 在 webpack.config.js 中创建后备对象node_modules/react-scripts/config/webpack.config.js

module.exports = function (webpackEnv) {
  ...
  return {
   ...
    resolve: {
      ...
      fallback: { // not present by default
        "crypto": false,
        "stream": false

      }
    }
  }

Answer 4

我终于找到了解决方案。使用 laravel，您必须更改 webpack.mix.js 文件，而不是 webpack.config.js。