- 在运行 React 项目时，报错：
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 } webpack compiled with 26 errors
- 原因呢是 webpack5 在精简后，移除了 nodejs 核心模块的 polyfill 自动引入，所以需要手动引入，如果打包过程中有使用到 nodejs 核心模块，webpack 会提示进行相应配置。
- 搜网上或看报错也知道如何解决，错误中已经说的很明白了，要么关闭，要么安装使用，比如上面的报错：
- 【不推荐】方式一：
webpack.config.js方式
- 执行
$ npm run eject是否webpack配置文件，找到config/webpack.config.js，搜索下resolve:配置，关闭一下配置：
resolve: { fallback: { "path": false, // 上面报错说可以关闭这个，其他的可以注释看报错不报错，报错就继续追加关闭 "assert": false, "stream": false, "constants": false, "util": false, "fs": false, }, ... }
除了关闭，也可以选择使用
resolve: { fallback: { "path": require.resolve("path-browserify"), // 使用可能需要安装一下 npm i path-browserify，先重启看报错不报错，报错在安装 ... }, ... }
- 【推荐】方式二：
craco.config.js方式，这样就不需要释放webpack配置
- 附：@craco/craco 安装，可以理解为是
webpack.config.js的外部扩展。
const path = require('path') module.exports = { // webpack 配置 webpack: { // 配置别名 alias: { // 约定：使用 @ 表示 src 文件所在路径 "@": path.resolve(__dirname, "src") }, // 这种方式是无效的，错误写法 // resolve: { // fallback: { // "path": false, // "util": false, // ... // } // }, // 这种方式才对的 // configure: (webpackConfig, { env, paths }) => { // // eslint-disable-next-line no-param-reassign // webpackConfig.resolve.fallback = { // "path": false, // "util": false, // "url": false, // "http": false, // "https": false, // "stream": false, // "assert": false, // "querystring": false, // "zlib": false // } // return webpackConfig // }, // 也可以这么写 configure: { resolve: { fallback: { "path": false, "util": false, "url": false, "http": false, "https": false, "stream": false, "assert": false, "querystring": false, "zlib": false } } } } }
