React项目编译报错：Module parse failed，需适配对应loader

错误原因：代码里用的可选链操作符?.属于ES2020语法，当前项目的Babel或webpack配置不支持该语法，导致编译时无法解析这个token。

解决办法： #

• 安装Babel可选链插件
  执行安装命令：

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

  在项目的babel.config.js或.babelrc文件中添加插件配置：

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

• 升级项目脚手架
  如果是create-react-app创建的项目，直接升级到最新版本，新版本默认支持可选链语法：

  npm install react-scripts@latest
  

• 临时替代写法
  不想修改配置的话，把course?.title替换为兼容写法：

  <span className="course-title">{course && course.title}</span>
  

错误日志： #

Failed to compile.
./src/components/CourseList.jsx 74:14
Module parse failed: Unexpected token (74:14)
You may need an appropriate loader to handle this file type.

对应代码片段： #

<span className="course-title">{course?.title}</span>
  <button
    className="delete-btn"
    onClick={() => {
      removeCourse(course.id);
    }}
  >
    Delete Course
  </button>

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