Bug with Safari #1132

shammelburg · 2018-04-14T12:41:55Z

Version

3.0.0-beta.6

Reproduction link

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

Steps to reproduce

Once you've cloned the project,

npm run serve
Go to Input.vue
add another input in the template
save (this will show on hot reload)
refresh the browser manually (the input is gone)
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 · 2018-04-14T23:05:54Z

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 · 2018-04-20T11:10:07Z

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 · 2018-04-27T04:05:37Z

This is definitely a bug in Safari itself...

joshgoebel · 2018-07-11T21:03:53Z

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 · 2018-08-02T12:57:54Z

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() 
    }  
  }
}

to circumvent a Safari caching issue closes vuejs#2391, vuejs#1132

to circumvent a Safari caching issue closes #2391, #1132

lmuzquiz · 2020-01-16T19:47:40Z

Same issue here using safari 13.0.4 on Mac OS Catalina 10.15.2

iandk · 2020-01-24T19:25:14Z

Same issue

patricklewis · 2020-02-04T03:00:30Z

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 · 2020-05-09T19:25:58Z

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 · 2020-07-17T15:48:25Z

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 · 2020-07-18T19:29:02Z

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.

There's a problem with the cache. it's a whole thing (vuejs/vue-cli#1132)

cvn · 2020-11-28T09:23:00Z

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.

Clear the cache with: ⌘ Command + ⌥ Option + E
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 · 2020-12-10T09:03:09Z

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 · 2020-12-10T09:11:15Z

@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.

FakieKickflip · 2021-01-23T10:20:14Z

First day with vue and still got this error with safari version 14.0.3. Kinda annoying to clear the cache before reload.

herrernst · 2021-01-24T14:45:03Z

@FakieKickflip You should better report this bug to Apple and insist on fixing it as this is a problem with Safari and not with Vue CLI.

kertahayu · 2021-03-21T11:23:57Z

I believe this is not a problem in safari, I developed several applications that use webpack and run normally.

maybe vue doesn't fully support safari by default.

this comment is at least helpful #1132 (comment)

crypthonics · 2021-05-16T14:00:55Z

This issue still persists on v14.1. Since this is caching related, I don't think it will ever get "fixed" because of different caching methods of Safari, so there is nothing to fix from Safari's side. Emptying the caches and reloading works, but since the deployed code doesn't cause problems, I would suggest to use another browser for active development and just do a final check with Safari when the developed feature is finished.

talmobi · 2021-06-04T10:16:00Z

Still an issue.

Clearing cache does NOT necessarily fix this issue. As crazy as that sounds. I think it may possibly be Service Worker related and here's what's happening.

Even destroying the development/localhost tab and creating a new one may not necessarily work. The first page you get served might be the correct updated one. But after you interact with the page or trigger a hot reload update, the page will REVERT BACK to an old version. This is crazy behaviour. I'm not exactly sure why or how but it smells like Service Worker related to me.

Things that will not work:

restarting web pack dev server
clearing cache on Safari
destroying the localhost tab and opening a new one

The above may work temporarily, but if you interact or issue a HMR update after loading, the page CAN REVERT BACK to an older version.

I found this out after having a console.log on a mounted on a component. And after having removed the console.log from the code. The old console.log message would appear from time to time (including old behaviour) even after all the above things. Restarting dev server, clearing cache, opening a new tab.

On Chrome at the same time everything was working fine, I was served the most updated version.

I'm not exactly sure what's going on but seems like possibly Service Worker related?

Safari Version 14.0.3 (16610.4.3.1.7)
Chrome Version 91.0.4472.77 (Official Build) (arm64)
OSX 11.2.3 (20D91)
MacBook Pro (13-inch, M1, 2020), M1, 16GB

node v14.16.0
npm 6.14.11
yarn 1.22.10

vue 2
@vue/cli-service 4.4.6

rx2347 · 2021-06-04T11:38:43Z

Same thing on Safari 14.1 (15611.1.21.161.7, 15611) on Catalina 10.15.7 and Vue CLI 4.5.12

Quite annoying.

nuvallo · 2021-06-16T19:10:29Z

I am having the same issue with my m1 8g Macbook Pro. If I clear the cache I will see my new changes but pretty annoying to have to keep clearing the cache for each save or change.

bfanger · 2021-06-17T18:37:41Z

There is nothing the vue-cli team can do, it's a bug in Safari: https://bugs.webkit.org/show_bug.cgi?id=219323
Even adding a Cache-Control: no-store, max-age=0 to the response has no effect and the result is still cached (Safari 14.1.1)

It's sad, but Safari simply doesn't comply with the http spec and also disregards the disable-cache devtool setting.

Instead of commenting in this thread, report the issue in channels that are read by the Safari browser developers/dev-advocates.

talmobi · 2021-06-17T20:28:22Z

@bfanger Why does this only happen with Vue on Safari? And not with any other devtool?

greenuns · 2021-06-19T09:55:07Z

i have the same issue. I thought my css wasn't working on mobile only to find out it's a vue bug.
For me it's on iPhone and iPad Safari AND Chrome.
The only way to get it work is to not refresh at all and by any chance I refreshed, I would need to close the tab and reopen.
Desktop is fine as I refresh with CMD+Shift+R.

@vue/cli 4.5.13
iOS version: 14.6
iOS Safari version: assuming Safari 14
iOS Chrome version: 91.0.4472.80
iPhone 7

andrecp · 2021-07-26T02:43:35Z

+1, it's a quite frustrating first user experience with the project.

D1kz · 2021-07-27T10:10:28Z

+1
still having this issue with Safari 14.1.2

agileben · 2021-08-10T11:59:13Z

Yeah ran into this today with Safari 14.1.2 (16611.3.10.1.3)

ctstewart · 2021-08-20T06:11:03Z

Same issue, I'm on Safari 14.1.1

musakanneh · 2021-09-27T09:35:00Z

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() 
    }  
  }
}

Thanks for this, mate/

speg · 2021-10-05T19:49:51Z

@Twinpix config to chainWebpack seems to do the trick. Is there any downside? ~~If no, can this be adopted into the project defaults?~~

Update: so it seemed to work, but then it happened again a bit later so perhaps this isn't a rock solid solution.

cvn · 2021-10-06T16:35:07Z

Hi, @speg. They already tried it and ran into issues, so they reverted it. See my comment above #1132 (comment) for a list of commits if you're curious about the details.

evvvritt · 2022-04-16T17:35:42Z

This comment's config was no longer working for me so I added chunkFilenames hashing and seems to be busting properly now in Safari 15.4

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

jared201 · 2023-02-02T02:57:08Z

This comment's config was no longer working for me so I added chunkFilenames hashing and seems to be busting properly now in Safari 15.4

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

This fixed my problem today

yyx990803 closed this as completed Apr 27, 2018

arthasshi mentioned this issue Aug 14, 2018

在safari中，cmd r刷新页面，会出现错误的页面 #2190

Closed

haoqunjiang mentioned this issue Aug 29, 2018

ios手机端经常要关闭页面重开才能刷新到最新，点击刷新按钮还是旧版 #2391

Closed

haoqunjiang added a commit to haoqunjiang/vue-cli that referenced this issue Aug 30, 2018

fix: add hash to filename in development mode

02efd78

to circumvent a Safari caching issue closes vuejs#2391, vuejs#1132

haoqunjiang mentioned this issue Aug 30, 2018

fix: add hash to filename in development mode #2403

Merged

haoqunjiang added a commit that referenced this issue Sep 4, 2018

fix: add hash to filename in development mode (#2403)

33dad39

to circumvent a Safari caching issue closes #2391, #1132

TheAlexLichter mentioned this issue Feb 11, 2019

safari: infinite loop when hot reloading nuxt/nuxt#3828

Closed

Yukaii mentioned this issue Dec 16, 2019

Fix image upload on chrome Disfactory/Disfactory#142

Merged

susanBuck mentioned this issue Apr 8, 2020

Why does Safari hate Vue? susanBuck/e28-spring20#50

Closed

danfishgold added a commit to danfishgold/wikipedia-charts that referenced this issue Oct 6, 2020

Fix reloading bug in Safari

f79f76b

There's a problem with the cache. it's a whole thing (vuejs/vue-cli#1132)

Oliweer mentioned this issue Mar 3, 2021

Hot reloading not working with PageQueries with Safari on Gatsby v3 gatsbyjs/gatsby#29952

Closed

LekoArts mentioned this issue Mar 3, 2021

fix(gatsby): Fix hot reloading for Safari gatsbyjs/gatsby#29960

Closed

kertahayu mentioned this issue Mar 21, 2021

HMR (Hot module reload) not working with vue cli 3 #2051

Closed

cvn mentioned this issue Sep 18, 2021

b-popover stuck open in Safari bootstrap-vue/bootstrap-vue#6781

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bug with Safari #1132

Bug with Safari #1132

shammelburg commented Apr 14, 2018

zigomir commented Apr 14, 2018

daniele-orlando commented Apr 20, 2018 •

edited

Loading

yyx990803 commented Apr 27, 2018

joshgoebel commented Jul 11, 2018

Twinpix commented Aug 2, 2018 •

edited

Loading

lmuzquiz commented Jan 16, 2020

iandk commented Jan 24, 2020

patricklewis commented Feb 4, 2020

rskvazh commented May 9, 2020

chrisbartow commented Jul 17, 2020

adarshsrivastava11 commented Jul 18, 2020

cvn commented Nov 28, 2020

panderson1000 commented Dec 10, 2020

cvn commented Dec 10, 2020

FakieKickflip commented Jan 23, 2021

herrernst commented Jan 24, 2021

kertahayu commented Mar 21, 2021

crypthonics commented May 16, 2021

talmobi commented Jun 4, 2021

rx2347 commented Jun 4, 2021 •

edited

Loading

nuvallo commented Jun 16, 2021

bfanger commented Jun 17, 2021

talmobi commented Jun 17, 2021

greenuns commented Jun 19, 2021 •

edited

Loading

andrecp commented Jul 26, 2021

D1kz commented Jul 27, 2021

agileben commented Aug 10, 2021

ctstewart commented Aug 20, 2021

musakanneh commented Sep 27, 2021

speg commented Oct 5, 2021 •

edited

Loading

cvn commented Oct 6, 2021

evvvritt commented Apr 16, 2022

jared201 commented Feb 2, 2023

Bug with Safari #1132

Bug with Safari #1132

Comments

shammelburg commented Apr 14, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

zigomir commented Apr 14, 2018

daniele-orlando commented Apr 20, 2018 • edited Loading

yyx990803 commented Apr 27, 2018

joshgoebel commented Jul 11, 2018

Twinpix commented Aug 2, 2018 • edited Loading

lmuzquiz commented Jan 16, 2020

iandk commented Jan 24, 2020

patricklewis commented Feb 4, 2020

rskvazh commented May 9, 2020

chrisbartow commented Jul 17, 2020

adarshsrivastava11 commented Jul 18, 2020

cvn commented Nov 28, 2020

panderson1000 commented Dec 10, 2020

cvn commented Dec 10, 2020

FakieKickflip commented Jan 23, 2021

herrernst commented Jan 24, 2021

kertahayu commented Mar 21, 2021

crypthonics commented May 16, 2021

talmobi commented Jun 4, 2021

rx2347 commented Jun 4, 2021 • edited Loading

nuvallo commented Jun 16, 2021

bfanger commented Jun 17, 2021

talmobi commented Jun 17, 2021

greenuns commented Jun 19, 2021 • edited Loading

andrecp commented Jul 26, 2021

D1kz commented Jul 27, 2021

agileben commented Aug 10, 2021

ctstewart commented Aug 20, 2021

musakanneh commented Sep 27, 2021

speg commented Oct 5, 2021 • edited Loading

cvn commented Oct 6, 2021

evvvritt commented Apr 16, 2022

jared201 commented Feb 2, 2023

daniele-orlando commented Apr 20, 2018 •

edited

Loading

Twinpix commented Aug 2, 2018 •

edited

Loading

rx2347 commented Jun 4, 2021 •

edited

Loading

greenuns commented Jun 19, 2021 •

edited

Loading

speg commented Oct 5, 2021 •

edited

Loading