MERN栈项目API集成遇Module parse failed错误，求解决方法

问题原因 #

你代码里使用的post?._id是ES2020新增的可选链操作符，但当前项目的Babel或Webpack配置未支持该语法，导致解析失败。

解决方案 #

1. 安装Babel可选链支持插件 #

在项目终端执行命令，安装对应插件：

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

或使用yarn：

yarn add @babel/plugin-proposal-optional-chaining --dev

2. 配置Babel启用插件 #

在项目根目录的.babelrc或babel.config.json文件中，添加该插件到配置项：

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

如果是Create React App创建的项目，默认已支持可选链，若仍报错可尝试删除node_modules和package-lock.json后重新安装依赖。

3. 语法降级替代（无需改配置） #

将可选链语法替换为ES5兼容的写法：
原代码：

if (!(post?._id && answer !== "")) {

修改为：

if (!(post && post._id && answer !== "")) {

4. 检查Webpack loader配置（自定义Webpack项目） #

确保babel-loader正确处理.js/.jsx文件，Webpack配置示例：

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

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