执行npm run build与Firebase初始化后npm start报目标容器非DOM元素错误

ReactDOM.render 传入的挂载容器为null才触发该报错，原因非常直接：执行firebase init配置Hosting的环节中，CLI会弹出“是否覆盖现有index.html”的确认提示，误选确认后，你项目原本的public/index.html被直接替换为Firebase官方欢迎页——这个页面里根本不存在id为root的DOM节点，React自然找不到挂载位置。

1. 还原被覆盖的入口HTML文件 #

• 如果项目有Git版本管理，直接执行命令就能还原文件：
  git checkout -- public/index.html
• 如果没有版本记录，手动新建public/index.html即可，核心要求是页面中必须包含React的挂载根节点，基础结构参考：

  <!DOCTYPE html>
  <html lang="zh-CN">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>你的React项目名称</title>
    </head>
    <body>
      <!-- 这个带root id的div是必须存在的，少了就会报同样的错 -->
      <div id="root"></div>
    </body>
  </html>
  

2. 验证本地开发环境恢复情况 #

停掉当前运行的本地服务，重新执行npm start，待项目启动后检查控制台报错是否消失、页面是否正常加载。

3. 修正Firebase配置，避免再次误改源码 #

之前配置出错的核心是把Hosting的静态资源目录指向了源码目录public，CRA项目的正确配置逻辑是把静态源指向构建产物目录：

• 重新执行firebase init，进入Hosting配置环节时，关键选项按以下规则选择：
  • 公共资源目录（Public directory）填写build，绝对不要填源码目录public——build目录是执行npm run build后生成的纯静态部署包目录，操作这个目录不会改动你编写的源码文件
  • 询问是否将所有路由重写为/index.html时选择Yes，避免React Router的页面刷新出现404
  • 询问是否覆盖现有index.html时选择No
• 配置完成后按标准流程部署：先运行npm run build生成最新构建产物，再运行firebase deploy完成上线。

• 若还原index.html后仍报相同错误，打开浏览器开发者工具的Elements面板，全局搜索是否存在id="root"的节点，找不到就是HTML里漏写了这个挂载点
• 不要手动修改firebase.json中hosting.public的字段值为源码public目录，否则每次执行Firebase CLI操作都可能覆盖源码文件

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