Bug 219323 - Stale content on reload with webpack dev server
Summary: Stale content on reload with webpack dev server
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Page Loading (show other bugs)
Version: Safari 14
Hardware: Mac macOS 10.14
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-11-27 23:32 PST by Chad von Nau
Modified: 2024-03-01 07:30 PST (History)
9 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Chad von Nau 2020-11-27 23:32:30 PST
Hello,

I'm a Vue.js developer. I use vue-cli to do local dev on my machine. Vue-cli uses webpack-dev-server to serve content.

When I have a page open, and I change some code, then I reload the page, I'm shown stale javascript. I have caching disabled in dev tools.

Some workarounds:

- Close all tabs the page is open in, then open a new tab
- CMD+OPT+E and reload
- Modify the dev server to change the asset filename every time its content changes

None of this is necessary in Chrome, even with caching enabled.


Environment:
----------------------------------------

- Safari 14.0.1
- macOS 10.14.6
- node.js 15.3.0
- vue-cli 4.5.9
- webpack-dev-server 3.11.0


To reproduce:
----------------------------------------

```
brew install node
yarn global add @vue/cli
vue create hello
# choose default settings
cd hello
yarn serve
```

Open http://localhost:8080/ in Safari. Show Web Inspector. Disable caching. Then, in another terminal tab:

```
sed -i='' 's/Welcome/Bienvenidos/' src/App.vue
```

Observe that Welcome has changed to Bienvenidos, through the magic of webpack's hot module reloading.

Now, reload the page.


Expected result:
----------------------------------------

The text still says "Bienvenidos"


Actual result:
----------------------------------------

The text has reverted to "Welcome".


Links:
----------------------------------------

I'm not the only one affected by this. In this GitHub issue, a comment containing a workaround has several dozen likes.
- https://github.com/vuejs/vue-cli/issues/1132

A user reports it affects Mobile Safari (Chinese source, I used google translate).
- https://github.com/vuejs/vue-cli/issues/2391

One of the vue-cli developers suspects the cause is that Safari "does not respect the response headers for cache control (there's a ETag header added by webpack-dev-server)".
- https://github.com/vuejs/vue-cli/commit/0909bc8#commitcomment-30490198

One user asserts "webpack-dev-server (via vue-cli 3) uses ETag headers, so Safari should send a If-None-Match requests, but doesn't.
- https://stackoverflow.com/questions/53062448/how-to-disable-all-caching-in-safari-13


----------------------------------------

Thanks for taking the time to review this,
Chad
Comment 1 Radar WebKit Bug Importer 2020-12-17 14:13:27 PST
<rdar://problem/72440618>