React项目编译失败：Module parse failed错误求助

错误原因分析 #

从报错信息和代码来看，编译失败核心问题有两个：

1. JSX被转义为HTML实体：App.jsx的return语句中，JSX元素使用了HTML转义字符（如<div>代替<div>），webpack无法识别这些转义内容为JSX语法，导致模块解析失败。
2. 可选链语法的编译支持缺失：代码中使用了user?.displayName这种ES6+可选链语法，若项目babel配置未启用对应支持，会触发编译报错。

分步解决方案 #

1. 修复JSX转义问题 #

将return语句中所有HTML转义字符替换为原生JSX语法：

• 把<替换为<，>替换为>
• 把'替换为'（如iframe链接中的转义单引号）

修复后的核心return代码示例：

return(
  <div className="App">
    <div className="header" id="header">
        <img src="/images/And.jpg" alt="img" className="img" draggable="false"/>
        <p id="name">{user != null ? user.displayName : ""}</p>
        {user?.displayName ? <button id="signin-btn" onClick={() => sign_out()} className="btn">Logout</button> : <button id="signin-btn" onClick={() => sign_in()} className="btn">sign up</button>}
    {/* 其余JSX代码同理替换 */}
  </div>
);

2. 确保babel支持可选链语法 #

• 若使用Create React App，默认已支持可选链，无需额外配置。
• 若为自定义webpack配置：
  1. 安装依赖：

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

  2. 在babel配置文件（.babelrc或babel.config.json）中添加插件：

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

3. 修复额外代码问题（避免后续运行时错误） #

• 从firebase/auth导入signOut函数：

import { getAuth, GoogleAuthProvider, signInWithPopup, FacebookAuthProvider, onAuthStateChanged, signOut } from "firebase/auth";

• 修改sign_out函数（移除冗余的auth参数）：

function sign_out(){
  signOut(auth);
}

• 修正iframe的styles属性为JSX规范的style：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2890.7456504646957!2d-116.58286188455435!3d43.570182779124316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54ae4ba7f3126acd%3A0xf241b3243132602c!2sMarist%20Hall%20at%20St.%20Paul's%20Catholic%20Church!5e0!3m2!1sen!2sus!4v1661484276436!5m2!1sen!2sus" width="1520" height="600" style={{border:0}} allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>

验证修复 #

完成修改后，重新启动项目：

npm start

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