React项目引入Chart.js3.1.0构建报模块解析失败，需配置哪种Webpack加载器

• 这次构建失败不是缺特定加载器，是配置和依赖版本不匹配导致的：
  • 你当前Webpack配置里的babel-loader写了exclude: /node_modules/，意思是所有node_modules目录下的js文件都跳过Babel转译流程。但chart.js@3.1.0打包出来的ESM格式文件中包含ES6+新语法（比如报错行里的对象扩展运算符...data[intermediateIndex1]），Webpack 3本身不具备原生解析这类新语法的能力，文件没经过转译自然触发模块解析失败。
  • Chart.js 3.x的官方构建产物是面向现代浏览器设计的，没有预先做ES5语法降级，和你当前使用的Webpack 3 + Babel 6的旧技术栈天然存在兼容性差异，不需要额外安装第三方加载器，仅调整现有配置即可解决问题。

方法1：给chart.js放开Babel转译通道 #

修改webpack.config.js中原有的babel-loader规则，不再全局排除所有node_modules下的文件，专门把chart.js加入转译范围：

{
  loader: 'babel-loader',
  test: /\.jsx?$/,
  // 排除node_modules目录下除chart.js之外的所有js文件
  exclude: /node_modules[\\/](?!chart\.js)/
}

该配置的优势是不会对整个node_modules目录全量开启转译，在解决兼容问题的同时不会明显拖慢项目构建速度，改动量最小。

方法2：替换适配当前技术栈的Chart.js版本 #

如果调整规则后仍存在其他语法兼容问题，可以直接安装和Webpack 3完全匹配的Chart.js 2.x稳定版本，不需要改动任何现有配置：

npm uninstall chart.js
npm install chart.js@2.9.4

Chart.js 2.9.4的官方打包产物已经预先完成了ES5语法转译，完全兼容你现有的Webpack构建流程，安装完成即可正常运行。

• 清理依赖冗余：你当前项目同时安装了@babel/polyfill和旧版babel-polyfill，可以删除不需要的@babel/polyfill，避免运行时出现polyfill重复加载的冲突。
• 校验Babel转译配置：可在.babelrc的env预设中补充目标浏览器规则，确保转译能力覆盖所需语法：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
    "react",
    "stage-0"
  ],
  "plugins": ["transform-class-properties"]
}

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