React TS项目用@mui-x/charts遇Unexpected token 'export'错误求助

问题原因 #

你遇到的错误是因为Next.js在服务端渲染过程中，加载了未被转译的ES模块语法（export）。Next.js默认不会转译node_modules中的包，而你使用的@mui-x/charts@6.0.0-alpha.13是早期测试版本，其ES模块输出未做兼容处理，导致Node.js的CommonJS环境无法识别该语法。

解决步骤 #

1. 升级@mui-x/charts到稳定版本 #

你当前使用的是非常老旧的alpha测试版，存在诸多兼容性问题。建议直接升级到最新稳定版：

npm install @mui-x/charts@latest
# 或使用yarn
yarn add @mui-x/charts@latest

稳定版会针对Next.js等框架做兼容性优化，大概率能直接解决问题。

2. 配置Next.js转译指定包（若暂不升级） #

如果暂时无法升级版本，可在next.config.js中添加transpilePackages配置，强制Next.js转译@mui-x/charts：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@mui-x/charts'],
  // 保留你原有的其他配置
}

module.exports = nextConfig

配置完成后重启开发服务器，Next.js会将该包转译为Node.js可识别的CommonJS模块。

3. 清理缓存并重新安装依赖 #

执行以下命令清理缓存和依赖，避免旧文件干扰：

rm -rf node_modules .next
npm install
npm run dev

4. 考虑升级Next.js版本 #

你当前使用的Next.js 12.2.3虽支持transpilePackages，但Next.js 13+对ES模块的处理更成熟，升级到新版本能减少类似兼容性问题：

npm install next@latest react@latest react-dom@latest

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