Create React App项目使用可选链操作符提示缺少对应loader如何解决

报错原因 #

可选链操作符?.是ES2020版本新增的语法特性，你当前项目的编译配置（通常是Babel+webpack）没有引入对应解析该语法的插件/loader，因此编译阶段无法识别该语法，就会抛出「需要匹配的loader处理该文件类型」的错误。
如果你的项目是基于低于3.3.0版本的create-react-app脚手架创建的，默认也不支持可选链语法，会触发同类报错。

解决方案 #

方案1：配置项目支持可选链语法 #

• 自定义webpack+Babel配置的项目：
  1. 安装对应依赖：npm install @babel/plugin-proposal-optional-chaining --save-dev
  2. 在项目根目录的.babelrc或babel.config.js配置文件中，将该插件加入plugins数组：

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

• 未eject的create-react-app项目：升级react-scripts到3.3.0及以上版本即可默认支持可选链。

方案2：使用兼容语法替代（无需修改配置） #

你当前用三元运算符做兜底、变量不存在时赋值为null的处理是完全合理的，既能兼容所有编译环境，也能避免访问空值属性触发的应用崩溃。
也可以根据实际需求选择其他替代写法：

• 逻辑与简写：const result = res && res.profileObj，当res为假值时直接返回res，不需要显式写三元判断，和可选链的差异为可选链遇假值返回undefined，该写法返回res本身。
• 多层属性的兜底可以嵌套逻辑与：const value = obj && obj.child && obj.child.prop，等价于obj?.child?.prop的兼容写法。

场景补充说明 #

react-google-login的登录成功回调正常返回时参数res一定存在，你的兜底处理可以覆盖异常触发回调、返回值异常等极端场景，属于合理的防御性编程，不需要调整。

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