使用可选链操作符条件渲染时遇模块解析错误，求快速修复

分场景修复方案： #

1. 自定义Babel/Webpack项目 #

• 安装Babel可选链支持插件：

  npm install @babel/plugin-proposal-optional-chaining --save-dev
  

• 在Babel配置文件（.babelrc/babel.config.js）中添加该插件：

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

• 确认webpack配置里的babel-loader已正确处理JS/JSX文件，未遗漏对应文件类型。

2. Create React App项目 #

• 若react-scripts版本低于3.3.0，直接升级到最新版本即可（3.3.0及以上默认支持可选链语法）：

  npm update react-scripts
  # 或用yarn
  yarn upgrade react-scripts
  

3. Vue CLI项目 #

• 升级@vue/cli-plugin-babel到最新版本，新版本默认支持可选链；
• 若无法升级，参照自定义Babel项目的方式，在babel.config.js中添加@babel/plugin-proposal-optional-chaining插件。

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