Vue-cli: Bug with Safari

[shammelburg]

Version

3.0.0-beta.6

Reproduction link

https://github.com/shammelburg/vue-cli-test

Steps to reproduce

Once you've cloned the project,

1. npm run serve
2. Go to Input.vue
3. add another input in the template
4. save (this will show on hot reload)
5. refresh the browser manually (the input is gone)
6. return to the code and save the file again (input appears)

What is expected?

When I refresh the browser the app needs to give me the latest build from when I saved the changes.

What is actually happening?

When making changes to a .vue file, eg. changing an input in the template,

the browser updates initially but when you refresh the browser manually it seems to return to first time you run 'npm run serve'.

When starting and stopping the app through terminal the app runs ok.

A similar things happens when changing property names.

---

I've ran this on Chrome and it works fine.

I'm running this on my Mac.

[zigomir]

So weird. It doesn't have to do anything with input, it behaves same for anything you change. Hot reload works, but after refresh you get old contents. I figured if I refresh http://localhost:8080/app.js in another tab I get latest bundle served and manual refresh works again. But not always 🌘 Even disabling cache (see Safari 11.1 below) won't help :/

It looks like Safari 11.1 caching issue to me. My wild guess would be they introduced regressions with implementing service workers. 👹

[daniele-orlando]

I'm facing the same bug.
Vue-Cli _3.0.0-beta.6_
Safari _11.1_

It is such a problem that I can't use Safari to develop with Vue anymore.

[yyx990803]

This is definitely a bug in Safari itself...

[joshgoebel]

FYI: Confirming issue with Safari 11.1.2. Also Safari Tech Preview Release 60 (Safari 12.0, WebKit 13606.1.23.1).

Works fine in Chrome.

[Twinpix]

I was facing the same annoying bug with Safari (both desktop and mobile), and since "app.js" was not updated , I had to add this code in "vue.config.js" to make it work.

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      config
        .output
        .filename('[name].[hash].js') 
        .end() 
    }  
  }
}

[lmuzquiz]

Same issue here using safari 13.0.4 on Mac OS Catalina 10.15.2

[iandk]

Same issue

[patricklewis]

Same issue here, Safari 13.0.4 on macOS 10.15.2 and Safari hot-reloads correctly on file changes but then reverts back to an older version of the site upon a refresh.

[rskvazh]

Same issue with Safari 13.1 (and older too) and vue serve. "Hot reload" reloads code successfully, but when I refresh page (Cmd+R) - old result loading unless I close the tab and open this same URL. In Network tab caching is off.

[chrisbartow]

First day using Vue and ran into this issue with Safari 13.1.1 trying to update the Hello World project and nothing changes.

[adarshsrivastava11]

Same issue with Safari 13.1 (and older too) and vue serve. "Hot reload" reloads code successfully, but when I refresh page (Cmd+R) - old result loading unless I close the tab and open this same URL. In Network tab caching is off.

@rskvazh @chrisbartow It is not a bug, Safari caching engine works differently and is currently in not in sync with how vue-loader works, so it'll always cache the first version and keep it persistent. You can change this behaviour in the developers tools. But I'd advices to use chrome or use Safari's incognito mode.

[cvn]

This is still an issue as of Safari 14.0.1 and vue-cli 4.5.9.

I filed a WebKit bug report https://bugs.webkit.org/show_bug.cgi?id=219323.

In the meantime, I clear the cache before each reload.

1. Clear the cache with: ⌘ Command + ⌥ Option + E
2. Refresh the page: ⌘ Command + R

Thanks to @bfanger for this tip.

P.S. @Twinpix's workaround is an alternative to clearing the cache before every reload, but apparently it can cause a memory leak. Adding the hash to the query string instead of the file name is another option, but can cause issues with some webpack loaders. See commits 33dad39, 52dbdf8, and 0909bc8.

[panderson1000]

Unfortunately this is making me think twice about using Vue. Just rebuilt my site with VueJS 3 and after deployment discovered Safari is choking. desktop Chrome OK, mobile Chrome OK, mobile Safari OK, desktop Safari NOPE! See alot of timeouts BUT ONLY on Safari.

[cvn]

@panderson1000 This bug is limited to an issue with local development using vue-cli. It does not affect deployed code. Perhaps you can post on the vue forum https://forum.vuejs.org with your issue.