React craco 解决 webpack ＜ 5 used to include polyfills for node.js core ...-阿里云开发者社区

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

2023-09-28 159

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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
        }
      }
    }
  }
}