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

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


当前回答

Secret的答案几乎对我有用(我还没有足够的声誉来评论,抱歉!)

按照他们的回答,然后告诉我,因为在eslint的要求版本的差异,我应该添加SKIP_PREFLIGHT_CHECK=true到项目中的.env文件,所以我只是把它添加到我现有的一个。

然后它将成功构建(终于!)但后来我注意到,至少在Chrome中,我无法点击任何东西,甚至无法选择任何文本。事实证明,在检查器中仍然有一个Iframe在所有可以删除的东西之上。-这适用于运行一个开发版本,npm run start,我不确定它是否适用于生产版本。

我必须说,在我看来,这种突然的变化真的没有经过很好的考虑!

其他回答

我正在使用craco的create-react-app,在升级到webpack 5时遇到了以下错误:

“缓冲”


Module not found: Error: Can't resolve 'buffer' in '/Users/therightstuff/my-project/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 }

这个问题通过安装npm install -D buffer来解决。

'fs'


Module not found: Error: Can't resolve 'fs' in '/Users/therightstuff/my-project/node_modules/line-navigator'

这个问题通过在craco配置craco.config.js中设置webpack回退来解决:

module.exports = {
    style: {
        postcssOptions: {
            plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
            ],
        },
    },
    webpack: {
        configure: (webpackConfig, { env, paths }) => {
            // eslint-disable-next-line no-param-reassign
            webpackConfig.resolve.fallback = {
                fs: false,
            };
            return webpackConfig;
        },
    },
}
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} 我移开了,节省了时间。 我希望它能帮助到一些人。 谢谢。

我尝试了这个https://stackoverflow.com/a/71803628/15658978解决方案,它解决了我的问题。

简单地运行以下2个命令

npm uninstall react-scripts
npm install react-scripts@4.0.3

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

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

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

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

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

当从webpack v4升级到v5时,我也得到了这些错误。 通过对webpack.config.js进行以下更改来解决

添加的决心。回退财产

删除节点属性

{
resolve: {
  modules: [...],
  fallback: {
    "fs": false,
    "tls": false,
    "net": false,
    "path": false,
    "zlib": false,
    "http": false,
    "https": false,
    "stream": false,
    "crypto": false,
    "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify 
  } 
},
entry: [...],
output: {...},
module: {
  rules: [...]
},
plugins: [...],
optimization: {
  minimizer: [...],
},
// node: {
//   fs: 'empty',
//   net: 'empty',
//   tls: 'empty'
// },
}

从v4升级到v5 => https://webpack.js.org/migrate/5/#clean-up-configuration