重大变更：webpack < 5 默认情况下包含了node.js核心模块的polyfill。

Question

重大变更：webpack < 5 默认情况下包含了node.js核心模块的polyfill。

node.jslaravelvue.jswebpack

26

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

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- FrankyHollywood · Answer 1

对于React应用程序，如果您不需要该模块，请确保webpack忽略它。

安装craco https://craco.js.org/docs/getting-started/
在项目根目录中创建一个craco.config.js文件，我的看起来像这样：

module.exports = {
    webpack: {
        configure: (webpackConfig) => {
            webpackConfig.resolve.fallback = webpackConfig.resolve.fallback || {}
            webpackConfig.resolve.fallback.zlib = false
            webpackConfig.resolve.fallback.http = false
            webpackConfig.resolve.fallback.https = false
            webpackConfig.resolve.fallback.stream = false
            webpackConfig.resolve.fallback.util = false
            webpackConfig.resolve.fallback.crypto = false
            return webpackConfig;
        },
    }
};

- Benja Jorquera · Answer 2

我不得不在Vue组件中删除这行以解决问题: import { ContextReplacementPlugin } from "webpack";

- Naima Ghulam.M · Answer 3

我在一个React应用中遇到了这个问题。
安装stream-browserify crypto-browserify对我来说没有起作用

我按照hjpithadia的答案进行了操作，只是在webpack.config.js文件中稍作修改。

安装包 npm install node-polyfill-webpack-plugin
在此处找到webpack配置文件

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

引入包 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
查找 module.exports
在插件数组中添加 new NodePolyfillPlugin(),

module.exports = function (webpackEnv) {
  ...
  return {
   ...
    plugins: [
      new NodePolyfillPlugin(),
      ...
    ]
  }
}

- Nicolas Nicolas · Answer 4

我终于找到了解决办法。在Laravel中，你必须改变webpack.mix.js文件而不是webpack.config.js文件。