安装@mui/x-charts后无法使用BarChart组件的问题求助

云原生阿岚

2026-6-27

问题原因与解决方案

问题根源

编译失败的核心原因是：@mui/x-charts依赖的@react-spring/core包使用了**可选链（?.）**语法，但你项目里的react-scripts@3.4.3版本默认不会转译node_modules中的代码。尽管你安装了Babel可选链插件，但该插件仅作用于自己的src目录代码，未覆盖第三方依赖包，导致webpack无法解析新语法。

另外你看到的start value has mixed support, consider using flex-start instead是CSS语法兼容警告，和当前编译错误无关，可后续再排查处理。

解决方案

方案一：升级react-scripts（推荐）

react-scripts 4.x及以上版本已默认支持可选链等ES新语法，且会自动处理相关依赖的转译：

升级react-scripts（兼容react@17.0.0的稳定版本）：

npm install react-scripts@^5.0.1 --save

清理旧依赖并重新安装：

rm -rf node_modules package-lock.json
npm install

重启项目即可。

方案二：不升级react-scripts，手动配置转译依赖包

如果无法升级react-scripts，可通过react-app-rewired修改webpack配置，让Babel转译@react-spring/core：

安装配置工具：

npm install react-app-rewired customize-cra --save-dev

在项目根目录创建config-overrides.js文件，内容如下：

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

module.exports = override(
  // 添加Babel插件支持可选链和空值合并运算符
  addBabelPlugins(
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ),
  // 指定需要转译的目录：项目源码 + react-spring相关依赖
  babelInclude([
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/@react-spring/core'),
    path.resolve(__dirname, 'node_modules/@react-spring/web')
  ])
);

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

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