Firebase Hosting部署React项目重载页面空白报Unexpected token '<'错误如何解决

问题成因 #

你遇到的错误Uncaught SyntaxError: Unexpected token '<'核心原因是浏览器请求JS/CSS静态资源时，拿到的是index.html的内容，将HTML文本当成JS解析就会抛出该语法错误，304状态码是浏览器缓存了之前的错误响应，不是根本问题。
具体触发逻辑：

• 你项目打包后的静态资源使用了相对路径引用，当在/bug-tracker/bugs-list这类多级路由页面重载时，浏览器会把当前路由路径当成父级目录，去请求/bug-tracker/static/js/xxx.js这类不存在的资源路径
• 你配置的Firebase重写规则会将所有不存在的路径请求 fallback 到index.html，所以请求静态资源时返回了HTML内容，导致解析错误
• 开发环境下webpack-dev-server默认配置了静态资源的绝对路径映射，所以不会出现该问题

解决方案 #

1. 修正静态资源路径配置
   如果你使用create-react-app搭建项目，在package.json中新增配置项：

"homepage": "/"

如果是自定义webpack配置，在webpack配置的output字段中添加：

output: {
  publicPath: '/'
  // 其他原有配置
}

该配置会让打包后的所有静态资源从站点根路径绝对引用，不会跟随当前路由路径变化。

2. 修正路由错误写法
   你当前App.js中<Redirect>组件的使用方法错误，Redirect是路由跳转组件，不需要嵌套子组件，错误的嵌套可能导致路由匹配异常，举个修正示例：

// 错误写法
<Redirect to='/bug-tracker/login' exact>
  <Login />
</Redirect>

// 正确写法
<Route path='/' exact>
  {!authCtx.loggedIn ? <Redirect to='/bug-tracker/login' /> : <Redirect to='/bug-tracker/bugs-list' />}
</Route>

组件渲染逻辑放到对应Route的子元素位置即可，不要嵌套在Redirect内。

3. 可选：如果你的项目整体部署在站点的/bug-tracker子路径下，需要给React Router的BrowserRouter组件添加basename属性：

<BrowserRouter basename="/bug-tracker">
  <App />
</BrowserRouter>

4. 重新部署前清理浏览器缓存，避免之前的错误缓存影响验证结果，你现有的firebase.json重写规则是SPA路由的标准配置，不需要修改。

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