如何Polyfill节点核心模块在webpack 5

webpack 5不再对节点核心模块进行自动填充。 请问怎么修?< / p >

BREAKING CHANGE: webpack <5默认情况下用于包括node.js核心模块的腻子。 现在情况已经不同了。验证你是否需要这个模块，并为它配置一个polyfill

errors

327722 次浏览
小开
当从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

小开
< p > npm install path-browserify 然后尝试改变webpack配置，包括:

module.exports = {
...
resolve: {
alias: {
path: require.resolve("path-browserify")
}
}
};
小开

看起来你已经使用了path包，它默认不包含在webpack构建中。对我来说，像这样扩展webpack配置有帮助:

{
// rest of the webpack config
resolve: {
// ... rest of the resolve config
fallback: {
"path": require.resolve("path-browserify")
}
},
}

如果你使用yarn，也可以通过npm install path-browserify --save-dev或yarn add path-browserify --dev安装path-browserify。

小开

通过node-polyfill-webpack-plugin重新添加对Node.js核心模块的支持:

安装包后，将以下内容添加到webpack.config.js中:

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")


module.exports = {
// Other rules...
plugins: [
new NodePolyfillPlugin()
]
}
小开

我想这里的大部分答案都能解决你的问题。然而，如果你的节点开发不需要polyfill，那么我建议在Webpack模块配置中使用target: 'node'。这帮我解决了这个问题。

下面是一些关于答案的文档:https://webpack.js.org/concepts/targets/

enter image description here

小开

你想用在

const nodeExternals = require('webpack-node-externals');

在webpack.config.js中添加

target: "node",
devtool: "source-map",
externals: [nodeExternals()],
小开
当我重新安装节点模块时，我的webpack当前版本是5.38.1，我已经修复了这个问题 npm i path-browserify -D安装后，你必须更新你的webpack.config.js resolve{} with fallback: {"fs": false, "path": require.resolve("path-browserify")}在不使用"fs": false时显示错误，即:Module not found: Error: Can't resolve 'fs' in '/YOUR DIRECTORY ...' 所以别忘了加上它;与其他内容，它看起来像:

module.exports = {
...
resolve: {
extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],// other stuff
fallback: {
"fs": false,
"path": require.resolve("path-browserify")
}
},
};

如果webpack.config.js文件中存在node属性，则删除它

小开

我遇到这个问题的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来修复它。

小开

错误:[webpack <5默认情况下用于包括node.js核心模块的腻子。

现在情况已经不同了。验证你是否需要这个模块，并为它配置一个填充。

< img src = " https://i.stack.imgur.com/JPcHP.png " alt = " / >

< p >回答: node_modules祝辞react-scripts祝辞配置比;webpack.config.js < / p >

在webpack.config.js文件中添加:

resolve: {
fallback: {
"http": require.resolve("stream-http") ,
"path": require.resolve("path-browserify")
},
}

< img src = " https://i.stack.imgur.com/BfNwY.png " alt = " / >

小开

我的环境是这样的:

  • 反应=比;15,17
  • 反应脚本=比;v5
  • webpack =比;v5

要解决这个问题，请遵循下面的说明

1-安装以下软件包

yarn add fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired

2-在项目的根目录package.json旁边创建config-coverrides.js

添加以下代码:

const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
fs: require.resolve('fs'),
assert: require.resolve('assert'),
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);


return config;
}

3-像下面这样修改packages.js

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

小开

你需要React =>v17 React脚本=>V5 webpack =>v5

解决问题

1)安装

"fs": "^2.0.0",  // npm i fs
"assert": "^2.0.0",  // npm i assert
"https-browserify": "^1.0.0", // npm i https-browserify
"os": "^0.1.2", // npm i os
"os-browserify": "^0.3.0", // npm i os-browserify
"react-app-rewired": "^2.1.9", //npm i react-app-rewired
"stream-browserify": "^3.0.0", // stream-browserify
"stream-http": "^3.2.0", //stream-http

2)在根目录下创建config-override .js 图像 < / p >

3)在config-override .js中添加配置

const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
fs: require.resolve('fs'),
assert: require.resolve('assert'),
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);


return config;
}

3)更改packages.json

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

问题解决了:)

小开

Create React App刚刚发布了v5，现在实现了Webpack v5。这将完全打破许多库，其中包括web3作为必需的节点核心库腻子将会丢失。

为了快速解决这个问题，你可以在package.json中修改这个:

"react-scripts": "^5.0.0"

这个

"react-scripts": "4.0.3"

在这之后:

rm -r node_modules


rm package-lock.json


npm install
小开

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

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

小开

如果你使用Twilio:

Twilio模块不是用于客户端JavaScript的，这就是它在Angular应用中失败的原因。Twilio使用您的帐户SID和您的认证令牌，在客户端使用代表风险; 所以最好是在服务器端使用它，并使用API
小开 
npm install assert --save


npm install buffer --save

对于任何面临类似问题的人，只需安装缺少的模块。这些模块被报告为缺失，因为它们是node.js的一部分，但也可以通过npm单独使用。

小开

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

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

秘密的答案几乎为我工作(我还没有足够的声誉来评论那里，对不起!)

在遵循了他们的回答中的步骤之后，它告诉我，由于eslint所需版本的差异，我应该在项目中的.env文件中添加SKIP_PREFLIGHT_CHECK=true，所以我只是将它添加到我现有的文件中。

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

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

小开

我使用create-react-app和craco，我在升级到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;
},
},
}
小开

新的vue-cli升级(v5)就是这样。为了修复它(空模块的方式)，你必须这样改变vue.config.js:

configureWebpack: (config) => {
config.resolve.fallback = {
...config.resolve.fallback,
// Include here the "empty" modules
url: false,
util: false,
querystring: false,
https: false,
};
}
小开
我喜欢保持事情简单，不需要运行npm run-script弹出直到这里，所以我降级回react-scripts@4.0.3而不是5.0.0 到目前为止，Webpack

中仍然没有修复这个问题

可悲的是，因为这包括一堆退役的包裹。

小开

根据Web3文档:

如果你使用的是create-react-app版本>=5，你可能会遇到构建问题。这是因为最新版本的create-react-app中没有包含NodeJS的polyfills。

解决方案:

安装react-app-rewired和缺少的模块

如果你用的是纱线:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

如果你正在使用npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

在项目文件夹的根目录下创建config-override .js，内容如下:

const webpack = require('webpack');


module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
< p >内包。Json改变脚本字段启动，构建和测试。用react-app-rewired代替react-scripts : < / p > 
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

后:

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

缺少的Nodejs polyfills现在应该包括在内，你的应用程序应该可以使用web3。

如果你想隐藏控制台创建的警告:

在config-override .js的override函数中，添加:

config.ignoreWarnings = [/Failed to parse source map/];
小开

方法1

  • < p > project/node_modules/react-scripts/config/webpack.config.js开放

  • 在fallback中添加"crypto": require.resolve("crypto-browserify")

resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify")
}
}
  • 安装npm i crypto-browserify
  • 重新启动应用程序。

如果你提交，上述方法将不起作用，因为我们不是node_modules

方法2

  • 安装补丁包:yarn add patch-package

  • 安装所需的填料。(做一个应用程序的初始构建，它会告诉你。)

  • < p >修改node_modules/react-scripts/config/webpack.config.js。这是一个例子。这是从Webpack的文档中截取的。

module.exports = {
//...
resolve: {
fallback: {
assert: require.resolve('assert'),
buffer: require.resolve('buffer'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
crypto: require.resolve('crypto-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
punycode: require.resolve('punycode'),
process: require.resolve('process/browser'),
querystring: require.resolve('querystring-es3'),
stream: require.resolve('stream-browserify'),
string_decoder: require.resolve('string_decoder'),
sys: require.resolve('util'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url'),
util: require.resolve('util'),
vm: require.resolve('vm-browserify'),
zlib: require.resolve('browserify-zlib'),
},
},
};
  • 不要添加所有的，只添加你需要的。

在修改webpack之前，请确保先安装软件包 config . < / p >

  • < p > yarn patch-package react-scripts运行。这将生成一个补丁(这应该在你的回购中提交)。

  • 添加postinstall脚本到包。json: "postinstall": "yarn patch-package"。现在，任何时候，有人在这个项目上安装npm deps，都会自动应用你在步骤3中创建的补丁。

  "scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "yarn patch-package"
},
小开

我的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'
]


})
小开

对我来说，我只是删除了一个未使用的导入，称为:

import res from "express/lib/response"

它把它修好了!

小开
我的问题是，我试图使用JSON。解析，然后当我开始写，自动完成显示我json(注意小字母)，尽管我重命名为json。当我按回车键时，它自动导入 (import {json} from "express/lib/response";) 这是原因，我根本没有注意到，在后来的开发过程中，我的应用非常糟糕，我花了大约6个小时才注意到这一点，因为应用相当大

所以如果上面的解决方案都不起作用，看看你是否没有导入一些东西。

小开

我找到了一个适合我的解决方案:

  1. npm uninstall webpack
  2. 删除“package-lock.json”;文件
  3. npm install webpack@4.44.2 --force
  4. 包含在“package.json”中;将以下文件归档到您的“脚本”中: 
    "scripts": {
"start": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
小开

我从express导入路由器时得到这个错误

. import {Router} from 'express'

修正后解决

. import {Router} from '@angular/ Router '
小开

面对同样的问题，这里有一个解决方案:

  1. 从项目文件夹中删除package-lock.json和npm uninstall webpack . exe
  2. 将react-script从5ˆ降级为4.0.3
  3. 确保package-lock.json被删除/删除
  4. 使用npm install webpack@4.44.2安装webpack
  5. 最后，使用终端运行npm install
小开

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

简单地运行以下2个命令

npm uninstall react-scripts
npm install react-scripts@4.0.3
小开 
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中 import {json} from 'body-parser' 我移开了，节省了时间。 我希望它能帮助到一些人。 谢谢。< / p >
小开

对于我(使用React =>15,17;反应脚本=比;v5;webpack =比;v5)，由@Letton和@Richie Bendall建议的解决方案组合与另一个附加，即包一起工作。Json中，必须添加并安装以下包。请同时注意fs版本"^2.0.0"抛出错误，因此更改为“0.0.1-security”。

"assert": "^2.0.0",
"https-browserify": "^1.0.0",
"os": "^0.1.2",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.1.9",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"fs":"^0.0.1-security",
"crypto-browserify": "3.12.0",
"buffer":"^6.0.3",
"node-polyfill-webpack-plugin": "^2.0.1"

安装完这些后，执行剩下的步骤，即将config-override .js添加到根目录，并更改包中的脚本内容。从react-scripts到react-app-rewired的Json修复了这个问题。


提交答案