报错信息
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 polyfil for it.If you want to include a polyfill,you need to:
- add a fallback 'resolve.fallback: i "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: i "path": false }
./webpack/webpack.dev.js 12:21-51
...
解决方式1
遗弃webpack5，将其改为[email protected]和[email protected]
- 这个改动代价是巨大的，还可能涉及一系列依赖需要版本调整
解决方式2
1、根目录新建config-overrides.js
config-overrides.js
/* config-overrides.js */
const webpack = require('webpack');
module.exports = function override(config, env) {
//do stuff with the webpack config...
config.resolve.fallback = {
url: require.resolve('url'),
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.module.rules = [
...config.module.rules,
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
]
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
2、下载相关依赖
package.json
"customize-cra": "^1.0.0",
"https-browserify": "^1.0.0",
"os-browserify": "^0.3.0",
"react-app-rewired": "^2.2.1",
"stream-browserify": "^3.0.0",
3、修改启动方式
"start": "react-app-rewired start",
"build": "react-app-rewired build",
- 方式2如果遇到错误，可删除package-lock.json和node_modules重试
参考地址
How to Polyfill node core modules in webpack 5
https://stackoverflow.com/questions/64557638/how-to-polyfill-node-core-modules-in-webpack-5
Error: Can’t resolve ‘process/browser’
https://github.com/microsoft/PowerBI-visuals-tools/issues/365