React项目配置Webpack遇fallback属性无效错误求助

错误原因 #

出现configuration.resolve存在未知属性'fallback'的错误，是因为resolve.fallback是Webpack 5新增配置项：如果项目用Webpack 4（比如旧版create-react-app），当前版本Webpack不识别该属性；如果是Webpack 5，可能是配置有误或依赖未安装。

针对性解决方案 #

第一步：确认Webpack版本 #

在项目根目录执行命令查看版本：

npm list webpack
# 或用yarn
yarn list webpack

情况1：Webpack 4（create-react-app < 5.x） #

Webpack 4不支持resolve.fallback，需改用resolve.alias配置，同时保留ProvidePlugin注入全局变量。

修改craco.config.js：

var webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        alias: {
          process: "process/browser",
          zlib: "browserify-zlib",
          stream: "stream-browserify",
          util: "util",
          buffer: "buffer",
          assert: "assert",
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};

情况2：Webpack 5（create-react-app >= 5.x） #

1. 修正配置笔误：原配置中fallback下的asset为错误写法，需改为assert
2. 确保craco版本兼容：需要craco 6.0.0及以上，版本不足则升级：

npm install @craco/craco@latest --save-dev

修正后的craco.config.js：

var webpack = require("webpack");

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          process: require.resolve("process/browser"),
          zlib: require.resolve("browserify-zlib"),
          stream: require.resolve("stream-browserify"),
          util: require.resolve("util"),
          buffer: require.resolve("buffer"),
          assert: require.resolve("assert"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
          process: "process/browser",
        }),
      ],
    },
  },
};

通用步骤：安装依赖包 #

无论哪种情况，都需要安装浏览器端的Node.js核心模块替代包：

npm install --save process browserify-zlib stream-browserify util buffer assert

最后重启React开发服务，错误即可解决。

内容的提问来源于stack exchange，提问作者skay