React项目编译报错：可选链操作符无法解析，求解决方案

报错信息 #

错误：无法解析类型为Chain Expression的prop value，编译失败。

./src/components/Main.jsx 26:12
Module parse failed: Unexpected token (26:12)
您可能需要合适的loader来处理该文件类型。
|
| var turncateString = function turncateString(str, num) {
| if (str?.length > num) {
| return str.slice(0, num) + '....';
| } else {

问题原因 #

代码中使用的**可选链操作符（?.）**是ES2020新增的语法特性，但当前项目的编译环境（Babel/Webpack）未配置对该特性的支持，导致编译时无法识别该语法。

解决方案 #

1. Create React App（CRA）项目 #

若项目由CRA搭建，低版本react-scripts默认不支持可选链，需升级到4.0.0及以上版本：

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

2. 自定义Webpack/Babel配置项目 #

需安装并配置Babel插件支持可选链：

• 安装插件：

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

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

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

• 若直接在Webpack配置中配置Babel loader，需确保loader选项包含该插件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-proposal-optional-chaining']
          }
        }
      }
    ]
  }
};

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

若暂时无法升级或配置编译环境，可将可选链语法替换为传统的存在性判断：
例如将str?.length改为str && str.length，movie?.title改为movie && movie.title。修改后的turncateString函数示例：

const turncateString = (str, num) => {
  if (str && str.length > num) {
    return str.slice(0, num) + "....";
  } else {
    return str;
  }
};

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