React项目编译失败：LineGraph.js第88行出现Unexpected token语法错误

这个报错是你的项目Babel编译环境不支持ES2020新增的可选链?.语法，因此解析到对应位置的语法时会识别为非法字符，抛出意外token错误。

快速生效方案（无需修改项目配置） #

直接替换可选链的写法即可，将第88行的data?.length改为普通的前置判断写法：

{data && data.length > 0 && (

修改后保存重新编译就能正常运行。

长期支持可选链语法方案 #

如果你使用Create React App搭建项目 #

升级react-scripts到4.0及以上版本，高版本CRA默认内置了可选链语法支持，直接执行安装命令即可：
npm i react-scripts@latest

如果你是自定义webpack+Babel配置的项目 #

1. 安装可选链对应的babel编译插件
   npm install @babel/plugin-proposal-optional-chaining --save-dev
2. 打开项目根目录下的.babelrc或babel.config.json配置文件，在plugins配置项中添加该插件：

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

3. 重启项目编译服务即可生效。

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