重大变更：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

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

- Nicolas Nicolas

---

这是我的解决方案 https://dev59.com/DlEG5IYBdhLWcg3wT55R#69345147 Laravel Mix 已在 app.js 中导入。 - Dennis Kiprotich

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

- hjpithadia

---

经过几个小时的谷歌搜索，我找到了这个，非常感谢。真是太棒了，运作得很顺利 :) - undefined

Answer 2

我在使用ReactJS中遇到了这个问题，使用的是create-react-app(facebook)，但是使用其他包（crypto-browserify）时也出现了同样的问题。

解决方法：

1. 首先，在此问题中安装必要的包"path-browserify"，但在我的情况下是"crypto-browserify"

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

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

• 搜索module.exports，在这个函数内部有一个return:

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项目启动时会显示警告。

注：我不是以英语为母语的人，但我希望你能理解我的意思。

- Camilo Gomez

---

请确保停止您的服务器并重新启动它。否则，感谢您的答案。 - Kasasira

差不多一年后，这解决了我的问题。+1 你最后找到解决那些警告的方法了吗？ 谢谢。 - itchibahn

是的，我不得不更新我的所有软件包，包括React、React-scripts，并将一些已弃用的软件包更换为其他软件包。但这种解决方案并不适用于所有项目。 - Camilo Gomez

Answer 3

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

我分两步解决了这个问题：

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

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

      }
    }
  }

- Zyncho

---

我想指出的是，这不是领域SDK特定的问题，而是react-scripts/webpack的问题；话虽如此 - 谢谢！这让我困扰了一段时间。 - oblivion02

第三步应该是重新启动服务器以使更改生效。 - Kasasira

谢谢@Kasasira，我会考虑的 ;) - Zyncho

完全同意你的看法 @oblivion02，谢谢！ - Zyncho

Answer 4

我在加密货币方面也遇到了同样的问题。有人说，在TS配置中添加正确的路径(并安装polyfill)应该可以解决这个问题。

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

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

我仍在与加密问题作斗争，但上述链接可能会对您的斗争有所帮助。

- Sielu

---

在我的情况下，我不得不迁移到crypto-es库。我从未解决过原始错误。 - Sielu

Answer 5

我曾经遇到过同样的问题，奇怪的是在我的app.js文件中引入了import {script} from 'laravel-mix'。我将其移除后，一切都恢复正常了。

- Dennis Kiprotich

Answer 6

我在一个新项目中使用rss-parser和React时，无法使其他答案起作用。错误信息不清楚。我通过将以下行添加到webpack配置文件中来解决了问题：

  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    fallback: { "http": false, "browser": false, "https": false, 
      "stream": false, "url": false, "buffer": false, "timers": false
    }
  },

- Cale McCollough

Answer 7

如果你使用create-react-app(cra)

1. 你需要覆盖默认的webpack文件 为此，你需要安装一个像“react-app-rewired”这样的包，它将帮助你覆盖并合并你的配置与react scripts添加的配置。 首先

 npm install --D react-app-rewired

2. 在根目录下创建一个名为 "config-overrides.js" 的新文件
3. 使用npm安装所需的依赖项，并将其添加到创建的配置文件中

npm i -D path-browserify
install other packages as the error message shows

const webpack = require('webpack');

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  Object.assign(fallback, {
    path: require.resolve('path-browserify'),
    add others as shown in the error if there are more
  });
  config.resolve.fallback = fallback;
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer'],
    }),
  ]);
  return config;
};

4. 更新你的package.json脚本

 "scripts": {
    "build": "react-app-rewired build",
     ....
    "start": "react-app-rewired start",
    "test": "react-app-rewired test"
  },

请注意，react-scripts的新版本（高于5.0.1）可能会解决此问题。

- Mohanad Walo

Answer 8

我解决了类似的问题：

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: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

1. 安装 npm i stream-browserify --save-dev
2. 创建自定义的 webpack.config.js 文件，包含以下内容：

module.exports = {
  resolve: {
    fallback: { stream: require.resolve("stream-browserify") },
  },
};

3. 安装 npm install @angular-builders/custom-webpack --save-dev

4. 分配 (angular.json: 项目 -> <proj_name> -> 架构师 -> 构建 -> 选项)

"customWebpackConfig": {
  "path": "./webpack.config.js"
}

更改：构建/服务/提取-i18n/测试-根据您的需求-使用自定义Webpack配置：

"builder": "@angular-builders/custom-webpack:browser",

- KGROZA

Answer 9

请使用Webpack 4.46.0版本来消除错误。

- Arpit Arya

---

这通常是最简单的选择，如果你正在运行 react-scripts v5（这就是这个“问题”出现的地方）。我正在运行 v4.0.0，它可以工作。我找到的 SO 答案链接 如果你确实需要保持在 v5 上和/或配置特定的模块，我发现 这个 SO 答案 很有用。 - Mike

v5.0出现的问题，提供降级到v4.x的解决方案并不理想。 - Varun

Answer 10

注意在您的app.js文件中的这个导入。将其删除可以解决我的问题。

- kasre