Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
当前回答
如果你使用Twilio:
Twilio模块不是用于客户端JavaScript的,这就是它在Angular应用中失败的原因。Twilio使用您的帐户SID和您的认证令牌,在客户端使用代表风险; 所以最好是在服务器端使用它并使用API。
其他回答
如果你使用Twilio:
Twilio模块不是用于客户端JavaScript的,这就是它在Angular应用中失败的原因。Twilio使用您的帐户SID和您的认证令牌,在客户端使用代表风险; 所以最好是在服务器端使用它并使用API。
对我来说,我只是删除了一个未使用的导入,称为:
import res from "express/lib/response"
它把它修好了!
根据Web3文档:
如果你使用的是create-react-app版本>=5,你可能会遇到构建问题。这是因为最新版本的create-react-app中没有包含NodeJS的polyfills。
解决方案:
安装react-app-rewired和缺少的模块
如果你用的是纱线:
yarn add --dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
如果你正在使用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;
}
内包。Json改变脚本字段启动,构建和测试。用react-app-rewired代替react-scripts 之前:
"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
开放项目/ node_modules react-scripts / config / webpack.config.js 在回退中添加"crypto": require.resolve("crypto-browserify")
resolve: {
fallback: {
"crypto": require.resolve("crypto-browserify")
}
}
安装npm i crypto-browserify 重新启动应用程序。
如果你提交,上面的方法是无效的,因为我们不是node_modules
方法2
安装补丁包:纱线添加补丁包 安装所需的填料。(做一个应用程序的初始构建,它会告诉你。) 修改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之前,请确保先安装这些包 配置。
运行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"
},
npm install assert --save
npm install buffer --save
对于任何面临类似问题的人,只需安装缺少的模块。这些模块被报告为缺失,因为它们是node.js的一部分,但也可以通过npm单独使用。