能否在React项目.js而非.ts文件使用Antd Charts？__spreadArray报错如何解决

报错核心原因 #

这个报错本质上和源文件是.js还是.ts没有直接关联，是文件后缀变化触发了构建工具的依赖解析规则偏移，暴露了依赖版本不兼容的问题：

• @ant-design/charts 依赖的底层@antv/algorithm组件，其ES模块版本是通过TypeScript编译生成的，编译过程会调用tslib提供的运行时辅助方法，比如本次报错提到的__spreadArray
• 当项目内使用.ts源文件时，构建工具会走默认的TypeScript处理管线，能自动匹配对应版本的tslib依赖、正确处理辅助方法的导入，因此不会报错
• 当源文件修改为.js后缀后，构建工具对依赖的解析路径发生偏移，会优先加载@antv/algorithm的原生ES模块产物，如果本地安装的tslib版本低于2.1.0（该版本才正式导出__spreadArray方法），就会触发导入失败的报错。

可落地的解决步骤 #

按照操作优先级从易到难排列：

• 首先排查本地tslib版本兼容性，在项目根目录执行npm ls tslib查看安装版本，如果版本低于2.1.0，直接安装最新版本的tslib作为开发依赖：
  npm install tslib@latest -D
• 如果升级tslib后报错仍存在，给构建工具增加tslib路径别名，强制所有对tslib的导入指向本地安装的ES版本产物：
  • Webpack项目可在webpack.config.js的resolve.alias配置中增加：tslib: path.resolve(__dirname, './node_modules/tslib/tslib.es6.js')
  • Vite项目可在vite.config.js的resolve.alias中增加同样的路径映射
• 临时适配方案：在项目根目录创建/修改jsconfig.json，开启allowJs和checkJs配置，让构建工具将.js源文件纳入原有的TypeScript处理管线，复用之前.ts文件可正常运行的依赖解析规则，避免解析路径偏移
• 如果受项目版本锁定限制无法升级tslib，可调整构建工具的loader配置，将@antv/algorithm/es目录加入babel-loader的处理范围，让构建时自动将__spreadArray的导入替换为对应原生JS实现，不直接依赖tslib的导出。

注意：不需要因为该报错将.js文件重新改回.ts后缀，js后缀的源文件完全可以正常运行Antd Charts，只需要处理上述的依赖兼容问题即可。

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