React集成ApexCharts构建失败：模块解析错误解决方案咨询

我正在开发一个React项目，执行react-scripts build创建生产构建时出现如下错误：

Creating an optimized production build...
Failed to compile.

./node_modules/apexcharts/dist/apexcharts.esm.js 2033:180
Module parse failed: Unexpected token (2033:180)
File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | let Gt = class extends Bt {
  | constructor(t, e) {

super(t, e), this.dom = {}, this.node.instance = this, (t.hasAttribute("data-svgjs") || t.hasAttribute("svgjs:data")) && this.setData(JSON.parse(t.getAttribute("data-svgjs")) ?? JSON.parse(t.getAttribute("svgjs:data")) ?? {});

| }
| center(t, e) {

错误源于空值合并运算符（??）未被构建流程正确转译。

环境信息 #

• React版本：16.13.1
• react-scripts版本：3.4.3
• apexcharts版本：^4.5.0
• Node版本：>=14
• 构建命令：react-scripts build

已尝试的无效方案 #

• 升级react-scripts，但项目与该包耦合度高，无法升级；
• 添加.babelrc文件显式支持新语法，无效。

核心疑问 #

如何解决React与ApexCharts项目构建时的模块解析错误？是否存在无需升级至react-scripts@5的可行方案？

无需升级react-scripts@5，可通过以下几种方案解决：

方案1：用react-app-rewired自定义Babel配置 #

这是最推荐的方案，通过自定义构建流程让Babel转译apexcharts代码：

1. 安装依赖：

npm install --save-dev react-app-rewired customize-cra @babel/plugin-proposal-nullish-coalescing-operator

2. 在项目根目录创建config-overrides.js文件，写入以下内容：

const { override, babelInclude, addBabelPlugin } = require('customize-cra');
const path = require('path');

module.exports = override(
  // 指定让Babel处理src目录和apexcharts包
  babelInclude([
    path.resolve('src'),
    path.resolve('node_modules/apexcharts'),
  ]),
  // 添加空值合并运算符的转译插件
  addBabelPlugin('@babel/plugin-proposal-nullish-coalescing-operator')
);

3. 修改package.json中的脚本命令，替换为react-app-rewired：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
}

4. 重新执行npm run build即可完成构建。

方案2：降级apexcharts到兼容版本 #

如果不想修改构建配置，可以尝试降级apexcharts到未使用??运算符的版本，比如3.x系列（推荐测试3.35.x版本）：

npm install apexcharts@3.35.3

注意：降级后需要验证图表功能是否与项目需求兼容，避免出现API不匹配的问题。

方案3：手动转译apexcharts代码（不推荐） #

如果上述方案都不可行，可以手动下载apexcharts源码，用Babel转译后替换node_modules中的对应文件，但这种方式维护成本极高，仅作为临时应急方案。

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