React craco 解决 webpack ＜ 5 used to include polyfills for node.js core ...

• 在运行 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
            }
          }
        }
      }
    }