Firebase hosting, Webpack and caching issues

Question

I'm using Webpack to build my React project, and I deploy it with Firebase hosting. It's a SPA, the index.html loads a single JS bundle, it all works great.

Except that sometimes, I get this error from some users:

SyntaxError: Unexpected token <

File https://tribeez.com/aa298947341ff919a5feecdc7367a6145a4a7d87.js line 1 col 1 in [anonymous]

It means that the JS bundle returned some HTML instead, and that happens when the file does not exist, thus returning the content of my index.html.

My firebase.json is quite basic:

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

So I was thinking, it must be when a visitor's browser is trying to fetch an older version of the JS bundle, but how can this happen? How can it load an older version of index.html (from its cache then) but can not load its related JS bundle from its cache too?

Should I tell Webpack to always create the JS bundle with the same filename and let Firebase Hosting handle the caching? Or should I handle this differently?

Firebase hosting, Webpack and caching issues

0 Answers