React项目引入TensorFlow.js未调用方法即报Expression类型错误如何解决

报错根因 #

该报错是项目Babel编译规则不兼容TensorFlow.js 2.x版本打包产物中的对象展开语法导致的。你的项目中同时安装了Babel 6和Babel 7两个版本的依赖，且react-scripts@3.4.3内置的编译规则无法正确识别tfjs中的SpreadElement语法，只要引入tfjs就会在编译环节触发报错，和是否调用其内部方法无关。

解决步骤 #

• 先卸载冲突的旧版本Babel依赖，执行命令：

npm uninstall babel-core babel-preset-env

babel-core和babel-preset-env是Babel 6的旧依赖包，和你项目中已安装的@babel/core、@babel/preset-env（Babel 7版本）冲突，会导致编译规则混乱。

• 二选一执行以下适配方案：
  1. 改动最小的方案：将package.json中的"@tensorflow/tfjs": "^2.4.0"替换为"@tensorflow/tfjs": "^3.9.0"，该版本调整了打包产物的语法兼容性，可直接适配react-scripts@3.x的编译规则，修改完成后执行npm install重新安装依赖即可。
  2. 长期适配方案：执行命令npm install react-scripts@4.0.3，升级后的react-scripts内置Babel规则支持解析tfjs 2.x的相关语法。
• 清理缓存重启项目：启动项目前先执行npx react-scripts start --reset-cache清理旧编译缓存，避免缓存导致报错复现。

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