Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?

break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。


当前回答

我的应用昨天也抛出了同样的错误。我花了几个小时在SO上阅读问题/答案,并尝试了一些。对我有用的是:

https://github.com/ChainSafe/web3.js#troubleshooting-and-known-issues

其他回答

Compiled with problems:X

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in 'E:\My Documents\work\web\mbamasala\node_modules\body-parser\lib'

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


ERROR in ./node_modules/body-parser/lib/types/urlencoded.js 217:12-34

Module not found: Error: Can't resolve 'querystring' in 'E:\My Documents\work\web\mbamasala\node_modules\body-parser\lib\types'

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


ERROR in ./node_modules/destroy/index.js 15:17-41

Module not found: Error: Can't resolve 'fs' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'


ERROR in ./node_modules/destroy/index.js 17:13-30

Module not found: Error: Can't resolve 'stream' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'

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 }


ERROR in ./node_modules/destroy/index.js 19:11-26

Module not found: Error: Can't resolve 'zlib' in 'E:\My Documents\work\web\mbamasala\node_modules\destroy'

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


ERROR in ./node_modules/mime-types/index.js 15:14-37

Module not found: Error: Can't resolve 'path' in 'E:\My Documents\work\web\mbamasala\node_modules\mime-types'

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 }


ERROR in ./node_modules/safer-buffer/safer.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'E:\My Documents\work\web\mbamasala\node_modules\safer-buffer'

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


ERROR in ./node_modules/string_decoder/node_modules/safe-buffer/index.js 4:13-30

Module not found: Error: Can't resolve 'buffer' in 'E:\My Documents\work\web\mbamasala\node_modules\string_decoder\node_modules\safe-buffer'

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

我试了很多办法,但都没有解决。 在手动搜索后,我得到了一行代码,它自动插入到我的vs code中 从body-parser导入{json} 我移开了,节省了时间。 我希望它能帮助到一些人。 谢谢。

所有其他答案都遗漏了一个重要的部分:如何不填充节点核心模块。 如果错误来自你的依赖项的依赖项中的某个模块,而你实际上并不需要,你可以完全忽略它。 在这种情况下,最简单的解决方法是添加到包中。Json这些行:

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

如果需要忽略其他核心节点模块,也可以这样做。

这种方法适用于默认情况下实际webpack配置不能直接访问的框架(比如Angular)。

在寻找不同的错误时,我已经找到了这个解决方案。

在create-react-app v17和脚本5.0.0中,你需要在webpack.config.js中添加一个备份,并安装'process'。

   `module.exports = function (webpackEnv) {
      .........
      return {
       .........
      resolve: {
      ..........
      fallback: { "process": require.resolve("process/browser") },`

我在create-react-app中遇到了这个问题

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.2"

我通过将react-scripts更改为4.0.3版本来解决这个问题。

我的VUE解决方案

const { defineConfig } = require('@vue/cli-service')
const webpack = require('webpack');
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      }),
      new webpack.ProvidePlugin({
          process: 'process/browser',
      })
    ],
    resolve: {
      fallback: {
        "os": require.resolve("os-browserify/browser"),
        "url": require.resolve("url/"),
        "crypto": require.resolve("crypto-browserify"),
        "https": require.resolve("https-browserify"),
        "http": require.resolve("stream-http"),
        "assert": require.resolve("assert/"),
        "stream": require.resolve("stream-browserify"),
        "buffer": require.resolve("buffer")
      }
    }
  },

  transpileDependencies: [
    'vuetify'
  ]

})