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

【问题标题】：BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default重大变化：webpack < 5 用于默认包含 node.js 核心模块的 polyfill
【发布时间】：2021-09-13 06:41:03
【问题描述】：

我正在尝试在我的 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

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

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

【问题讨论】：

这是我的解决方案stackoverflow.com/a/69345147/13329849 Laravel mix 已导入 app.js

标签： node.js laravel vue.js webpack

【解决方案1】：

我对加密也有同样的问题。有人说在 TS 配置中添加正确的路径（并安装 polyfill）应该可以解决问题。

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "crypto": [
        "./node_modules/crypto-browserify"
      ],
}

详情https://github.com/angular/angular-cli/issues/20819

我仍在与加密货币作斗争，但上面的链接可能有助于你的斗争。

【讨论】：

就我而言，我不得不迁移到 crypto-es 库。我从来没有克服过最初的错误。

【解决方案2】：

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

解决方案：

首先在这个问题“path-browserify”中安装必要的包，但在我的情况下是“crypto-browserify”
用 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：我的母语不是英语，但我希望能理解我。

【讨论】：

【解决方案3】：

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

【讨论】：

对你有好处，但我什至没有使用 lavarel js，它用这个无意义的错误破坏了一切。

【解决方案4】：

我遇到了同样的问题，奇怪的是我的 app.js 中的一个 import {script} from 'laravel-mix'。我删除了它，一切都恢复正常了。

【讨论】：