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

• When running Reactthe project, an error is reported:

  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
  

• The reason is that webpack5after streamlining, the automatic introduction nodejsof the core module has been removed, so it needs to be introduced manually. If the core module polyfillis used during the packaging process , you will be prompted to configure it accordingly.nodejswebpack

• You will know how to solve it by searching the Internet or reading the error report. The error has made it very clear. You must either close it or install it and use it. For example, the above error report:

• [Not recommended] Method 1: webpack.config.jsMethod

  • Execute the $ npm run ejectconfiguration webpackfile, find it config/webpack.config.js, search for resolve:configuration, and close the configuration:

    resolve: {
            
            
      fallback: {
            
            
        "path": false, // 上面报错说可以关闭这个，其他的可以注释看报错不报错，报错就继续追加关闭
        "assert": false,
        "stream": false,
        "constants": false,
        "util": false,
        "fs": false,
      },
      ...
    }
    

    In addition to closing, you can also choose to use

    resolve: {
            
            
      fallback: {
            
            
        "path": require.resolve("path-browserify"), // 使用可能需要安装一下 npm i path-browserify，先重启看报错不报错，报错在安装
        ...
      },
      ...
    }
    

• [Recommended] Method 2: craco.config.jsThis way, there is no need to release webpackthe configuration

  • Attachment: @craco/craco installation can be understood as webpack.config.jsan external extension of .

    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
            }
          }
        }
      }
    }