React项目中可选链运算符报错的解决方法

报错原因 #

可选链运算符（?.）是ES2020新增的语法特性，你的项目构建工具（比如Webpack+Babel）当前未配置对该语法的转译支持，导致工具无法识别这一语法，因此抛出「需要合适的loader处理文件类型」的错误。

解决办法 #

根据项目搭建方式，分两种场景处理：

场景1：使用Create React App搭建的项目 #

• 官方Create React App（CRA）从3.3.0版本开始默认支持可选链语法，先检查你的react-scripts版本：
  在项目根目录执行命令：npm list react-scripts
• 如果版本低于3.3.0，执行升级操作：

  npm install react-scripts@latest
  # 或使用yarn：
  yarn upgrade react-scripts@latest
  

• 升级完成后重启开发服务器，即可正常使用?.语法。

场景2：手动配置Babel的项目 #

如果是自行配置Babel和Webpack的项目，需要安装并启用对应的Babel插件：

1. 安装依赖：

npm install @babel/plugin-proposal-optional-chaining --save-dev
# 或使用yarn：
yarn add @babel/plugin-proposal-optional-chaining --dev

2. 修改Babel配置文件（.babelrc或babel.config.js）：

• 若使用.babelrc，配置如下：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

• 若使用babel.config.js，配置如下：

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: ['@babel/plugin-proposal-optional-chaining']
};

3. 重启Webpack开发服务器，语法即可被正常解析。

临时替代方案（不推荐长期使用） #

如果暂时不想调整配置，可以用逻辑与运算符模拟类似效果：

{user && user.displayName}

注意：这个写法和user?.displayName行为有细微差异——如果user.displayName是0、空字符串这类假值，会被渲染为空，而可选链会如实渲染这些值，因此优先推荐通过配置支持原生语法。

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