React项目npm start启动报Module parse failed错误解决方法

执行npm start命令启动项目时出现编译失败报错，无法明确具体产生原因，报错信息如下：

Failed to compile.

./src/components/posts/Posts.jsx 18:11
Module parse failed: Unexpected token (18:11)
You may need an appropriate loader to handle this file type.
|       columnNumber: 5
|     }
>   }, posts?.map(function (p) {
|     return /*#__PURE__*/React.createElement(Post, {
|       post: p,

• 删除node_modules目录下的babel-loader并降级至8.0.5版本，操作原因是报错出现前曾收到提示，称当前React应用需要babel-loader 8.0.5版本
• 删除全部node_modules目录与package-lock.json文件后，重新执行npm install命令安装依赖，问题仍未解决

Posts.jsx 完整代码 #

import Post from "../post/Post";
import "./posts.css";
import React from "react";

export default function Posts({ posts = [] }) {
  return (
    <div className="posts">
      {posts?.map((p) => (
        <Post post={p} />
      ))}
    </div>
  );
};

package.json 完整配置 #

{
  "name": "blog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "axios": "^0.27.2",
    "babel-loader": "^8.0.5",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "font-awesome": "^4.7.0",
    "html-to-draftjs": "^1.5.0",
    "jodit-react": "^1.3.10",
    "markdown-draft-js": "^2.4.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-helmet": "^6.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "tailwindcss": "^3.0.24"
  }
}

报错核心是依赖版本严重不兼容：
项目中使用的react-scripts@2.1.3是2018年发布的旧版本，内置的babel编译配置不支持ES2020标准的可选链操作符?.，也就是代码里posts?.map这部分语法，编译到这一行就会直接抛出解析错误。同时这个版本的react-scripts和项目安装的React 18、手动安装的babel-loader 8.0.5也存在适配冲突，之前单独降级babel-loader的操作解决不了内置编译配置不支持新语法的问题，因此即使重装依赖也无法修复问题。

按以下步骤操作即可解决：

• 打开package.json，删除dependencies中手动添加的"babel-loader": "^8.0.5"字段。babel-loader是react-scripts自动管理适配版本的依赖，不需要手动单独安装，手动安装反而会打乱依赖版本匹配关系
• 执行命令将react-scripts升级到支持React 18、兼容ES2020语法的稳定版本：

npm install react-scripts@5.0.1 --save

• 删除当前项目目录下的node_modules文件夹和package-lock.json文件，重新执行npm install安装全部依赖
• 依赖安装完成后执行npm start，项目即可正常编译启动

如果暂时不想升级react-scripts，也可以临时把代码里的posts?.map改成posts && posts.map，绕过旧版本babel不识别可选链语法的问题，但这个方法治标不治本，后续编写其他新JS语法时还是会触发同类报错，优先推荐升级react-scripts。

内容的提问来源于stack exchange，提问作者sultan.h