Firebase托管React应用部署后App.js内容未加载渲染问题

• 你当前配置的Firebase托管目录是项目源码下的public文件夹，里面只有静态的空index.html，完全没有React应用编译后的可部署资源。本地npm start能正常运行，是因为开发服务器在内存中实时编译JSX、绑定资源，这些编译产物根本不会写入磁盘，也就没法被Firebase托管服务获取到。
• 另外你的项目代码存在多处语法错误，就算直接部署源码也会因为加载JS时报错，导致React根本没法挂载到#root节点上。

分步解决操作 #

1. 先修复阻碍构建的代码问题
   • 删除src/components/App.js第6行单独存在的多余字符t
   • 给src/components/App.js里引用的dbank图片变量补上导入逻辑，或是临时注释掉未定义变量对应的img标签，避免构建报未定义错误
   • 修正src/index.js里的Firebase初始化代码：当前写法firebase.initializeApp = { ... }是把初始化方法覆盖成了普通对象，正确写法是带调用括号的firebase.initializeApp({ ... })
2. 生成生产环境部署包
   在项目根目录执行命令 npm run build，等待打包完成后，会在项目根目录自动生成build文件夹，里面存放了所有浏览器可直接运行的静态资源，包括编译压缩后的React JS bundle、样式文件、可直接部署的index.html。
3. 调整Firebase托管配置
   修改根目录下的firebase.json，把托管的公共目录指向React构建输出的文件夹：
   把原有配置里的 "public": "public" 替换为 "public": "build"，其余的ignore规则、SPA路由重写规则可以保留原有配置，不需要改动。
4. 清理冗余的模板代码
   你之前执行firebase init时自动覆盖了项目里的index.html，额外加了一堆Firebase CDN SDK的引用脚本，这些脚本和你项目里集成的Firebase SDK是重复的。等React构建完成后，build目录下的index.html是你项目原本的模板文件，会自动覆盖原来public目录下被篡改的内容，不需要手动额外清理。
5. 重新部署
   在项目根目录执行firebase deploy --only hosting，这次部署会上传build目录下所有编译完成的资源，访问托管域名就能正常看到App.js里渲染的页面内容。

注意：不要尝试直接把App.js、index.js这类React源码文件手动放到public目录下部署，浏览器无法识别JSX语法，必须经过npm构建步骤转译后才能正常运行。

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