Chrome not loading all webpack JS source files, but Firefox + Chrome Incognito does

Question

We've run into a recent deployment issue with our Vue.js app served via Heroku.

The high-level problem is that, when we redeploy to our Dev environment, the app only loads in Chrome Incognito mode or in Firefox.

The app does not load in normal Chrome - instead it returns a blank white page.

We're concerned that when we promote from Dev -> Staging -> Prod, users will also experience this caching issue and the app will not load for them.

One thing we noticed is that a file which is loaded in incognito mode, login.js , is not being loaded in non-incognito.

.

Non-incognito mode

Non-incognito source files

(Here we can see that login.js , as well as an img folder, fails to load)

.

Incognito mode

Incognito source files

Another thing we noticed is that bootstrap seems to be initiating this call in incognito mode, but we don't see this request in non-incognito. Perhaps bootstrap is failing to load?

We also see this in the console:

Therefore it seems like something is not being loaded, or is being cached (and therefore the newest/correct version is not loaded).

We experience this problem even if we activate "Disable cache" in Chrome Dev Tools in non-incognito mode.

We're not sure if this is a caching issue, or a webpack issue, or maybe just a Chrome issue. Does anyone know why these source files may be failing to load in non-cognito mode?

.

Edit : I also disabled all Chrome Extensions in non-incognito mode to no avail. Another developer on our team confirmed the issue on his end, however, a second developer does not have the issue at all in Chrome.

To replicate the issue, you can't just visit the website once . In fact, you need to visit it once, then a new version must deploy, and then upon reloading the page, it will fail to load.

.

Edit 2 : One more thing I noticed is that the correct version incognito loads TWO OF EACH login.js and login.css . The non-incognito version fails to call the second versions. I wonder if there is a name conflict somehow being cached?

Answer 1

I believe we figured out the answer.

Clear storage affects 3 things.

1. Service workers
2. Storage
3. Cache

We were pretty sure it's not a cache issue because we added Content: no-cache and Disable cache in Chrome Dev Tools. Additionally, we don't use any Service workers for the app.

We switched from using localStorage (persistent) in our application code to using sessionStorage (ephemeral).

This seemed to solve the issue.