Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
Webpack 5不再对节点核心模块进行自动填充。 请问怎么修?
break CHANGE:默认情况下,webpack < 5用于为node.js核心模块包含polyfills。 现在情况已经不同了。验证你是否需要这个模块,并为它配置一个填充。
当前回答
我想这里的大部分答案都能解决你的问题。然而,如果你的节点开发不需要Polyfills,那么我建议在Webpack模块配置中使用target: 'node'。这帮我解决了这个问题。
这里有一些关于答案的文档:https://webpack.js.org/concepts/targets/
其他回答
当从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
NPM install path-browserify 然后尝试更改webpack配置以包括:
module.exports = {
...
resolve: {
alias: {
path: require.resolve("path-browserify")
}
}
};
我的环境是这样的:
React => v17 React脚本=> 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
"脚本":{ “start”:“react-app-rewired start”, “build”:“react-app-rewired build”, “test”:“react-app-rewired test” "eject": "react-app-rewired eject" },
我的问题是,我试图使用JSON。解析,然后当我开始写,自动完成显示我json(注意小字母),尽管我重命名为json。当我按回车键时,它自动导入 (import {json} from "express/lib/response";) 这是原因,我根本没有注意到,在后来的开发过程中,我的应用程序非常糟糕,我花了大约6个小时才注意到这一点,因为应用程序相当大。
所以如果上面的解决方案都不起作用,看看你是否没有导入一些东西。
方法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"
},