safari: infinite loop when hot reloading #3828

ydnar · 2018-09-01T00:19:36Z

Version

v1.4.2 (or latest 2.0.0 pre code)

Steps to reproduce

Launch dev server via yarn dev (HOST=0.0.0.0 nuxt)
Load http://localhost:3000/
Edit code, any code. Watch the nuxt dev server recompile everything.
Reload
HMR fails, triggering rapid reloading of the entire page, forever, until Safari kills the tab for excessive CPU usage.
The only way to test new code is to close the tab and open a new tab to localhost (and re-open dev console).

What is expected ?

Hot reload to work without forcing me to close the tab and open a new tab every time I change a line of code.

What is actually happening?

Browser crushing infinite reload.

_{This bug report is available on Nuxt community (#c7666)}

The text was updated successfully, but these errors were encountered:

manniL · 2018-09-01T15:11:50Z

@ydnar Have you tried to remove all page information about localhost in safari? I had similar issues when a service worker stuck.

aldarund · 2018-09-01T21:32:20Z

I have same\similar issue on chrome all time. I have use of nuxt/pwa. And reloading just hangup on some of hot reload and after it page dont load at all no matter if u close tab, open new tab or anything it will just load forever. Only anonymous window helps. Pretty terrible dev experience

manniL · 2018-09-01T21:45:29Z

@aldarund See nuxt-community/pwa-module#60 (comment). This should be an issue of pwa-module, not nuxt-core itself.

@ydnar Please ping me if you do not use workbox/pwa-module

ydnar · 2018-09-04T19:04:31Z

@manniL we’re not using pwa-module, just vanilla Nuxt (dev branch).

Aric-sky · 2018-09-13T06:04:35Z

I have same\similar issue on chrome all time. I have use of nuxt/pwa. And reloading just hangup on some of hot reload and after it page dont load at all no matter if u close tab, open new tab or anything it will just load forever. Only anonymous window helps. Pretty terrible dev experience

Have you solved this problem? @aldarund

Norbz · 2018-09-14T11:53:58Z

We have the same issue here, some things I tried without any success :

Removing the .nuxt folder
Completely killing the server and restarting
clearing all cookie, localStorage and stuff...
reinstalling all node_modules

I am working on MacOS, happens to all browsers, but not all the time. I can sometime works for a few hours before it happens.
I have PWA module installed, but if i record correctly, it happened before I added it to the project (not sure though)

Environment :

node v8.11.3
npm v5.5.1
yarn v1.9.2

Nuxt : v1.4.2
PWA module : v2.5.0

galvez · 2018-09-14T12:06:23Z

I have just experienced the same issue - I am investigating it.

yoyo837 · 2018-11-30T07:14:39Z

Same issue here. (safari only)
I am using safari for the first time today to debug nuxt.js, I found it so late.

Edit: Need to have a build error, change file, make a mistake, save file, as you can see that now..

bovas85 · 2018-12-14T15:25:52Z

you can see this happening here in Safari
https://antilophia-ttkaqicfap.now.sh/ or something related to it I think

felixdenoix · 2018-12-26T11:41:40Z

Same here, fyi it also happends for me on a nextjs project so it may be a webpack related issue!

sabithpocker · 2018-12-29T16:34:44Z

Similar issue with nuxt, Safari shows following errors:

[Info] You are running Vue in development mode. (commons.app.js, line 17101)
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
[Log] [HMR] connected (vendors.app.js, line 1830)
[Log] [HMR] Checking for updates on the server... (vendors.app.js, line 2118)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (3e9ec34fb6b7af1e692e.hot-update.json, line 0)
[Warning] [HMR] Cannot find update (Full reload needed) (vendors.app.js, line 2128)
[Warning] [HMR] (Probably because of restarting the server) (vendors.app.js, line 2129)
[Warning] [HMR] Reloading page (vendors.app.js, line 2219)

valera-rozuvan · 2019-01-03T06:52:30Z

Started testing my app in Safari Version 12.0.2 (14606.3.4).

"nuxt": "2.3.4", same problem.

This happens when I restart the app, while the app is already open in the browser. Once the server comes up a second time, Safari goes bezerk 😄

Latest Google Chrome & Mozilla Firefox do not experience such an issue.

schrockwell · 2019-01-07T21:54:12Z

Also worth noting: a manual refresh does NOT stop the refresh loop, even with clearing the cache (Cmd-Option-R). The window/tab must be completely closed to stop the loop.

I am also experiencing this on mobile Safari on iOS 12.1.2.

danchristian · 2019-01-08T12:40:52Z

I get this too, same as above, only killing the tab solves it 😕

liepaja · 2019-01-17T19:15:05Z

In my case the reason was wrong URL of back-end for graphql and axios. It tries to reconnect, but gets 304.

manniL · 2020-12-09T17:16:45Z

@valera-rozuvan Probably trying this first.

#3828 (comment)

What finally worked for me was the following in my nuxt.config.js:
{
  build: {
    devMiddleware: {
      headers: {
        'Cache-Control': 'no-store',
        Vary: '*'
      }
    }
  }
}

horaciosolorio · 2020-12-09T19:04:44Z

Thank you looks like this solve the issue

fabiom91 · 2020-12-10T09:37:50Z

@ydnar Have you tried to remove all page information about localhost in safari? I had similar issues when a service worker stuck.

Thanks, just emptying the cache worked for me

elielr01 · 2021-01-30T04:36:57Z

I was experiencing this bug, and as @fabiom91 mentioned, just emptying the cache fixed my issue.
No code changes required. 👍

Nuxt: 2.14.12
Safari: 14.0.2

nuxt/nuxt#3828

revolter · 2021-02-10T20:13:18Z

just emptying the cache fixed my issue

Except you have to do this after almost every server restart...

JeremyJaydan · 2021-02-22T17:40:18Z

I've been having this issue for the last few days but with chrome while using a cloud ide & a cloudflare tunnel.

The fix for me was to turn on "Development Mode" in cloudflare under "Caching > Configuration > Development Mode" which disables all caching on that side of things.

I assume this bug has something to do with a conflicting cache/header expectation for the dev server.

blaadje · 2021-03-03T11:15:43Z

I don't get why this issue is closed.
The "workaround" has to be manage by us & remove all cache does not seem like a proper solution.
A lot of users are having this issue since a long time, it's getting annoying.

pi0 · 2021-03-03T11:20:20Z

Is this issue reproducible without PWA module?

revolter · 2021-03-03T11:25:48Z

Is this issue reproducible without PWA module?

Yes. If it helps you debug this issue, it happens for me in this repo: https://github.com/pandicornzombie/website.

* fixes reload loop on safari (closes #3828)

pi0 · 2021-03-23T18:32:46Z

Issue should be solved in next nightly (nuxt-edge) and nuxt release (via #9034)

lorenzofiamingo · 2021-03-25T15:27:07Z

I have this same problem using nuxt+typescript.
I solved this on macOS running this on terminal:
kill $(lsof -ti:3000)

Probably when I suspended from npm run dev (with ctr+z... maybe I had to use directly ctr+c) process on port is not killed by Nuxt. Indeed, when I rerun the command from the same terminal it connect to another port (and all works fine), but if I rerun the command from another terminal tab it attach another process to the port congesting it (and the view flickers).
In any case with that command all works fine, but is a small consolation since now I have multiples Nuxt processes on random ports that I can't kill.

danielroe · 2021-03-25T15:28:38Z

@lorenzofiamingo Have you tried with nuxt-edge using the fix that was just merged?

lorenzofiamingo · 2021-03-25T15:32:55Z

@danielroe Sorry but I'm a real beginner with nuxt (started an hour ago 😅), so I'm not sure to know how to do that. Anyway for me the problem is solved using ctr+c to kill npm run dev.

danielroe · 2021-03-25T16:04:53Z

@lorenzofiamingo Great - glad all is well 😊

Grawl · 2021-12-17T09:58:09Z

Just had the same issue in Quasar Framework. Open project in dev mode in Safari, got infinite reload with and without Web Inspector. I tried also turn on and off cache button in Web Inspector, has no effect.

My app is in SSR + PWA mode.

I tried to disable PWA feature in my app, no effect.

Before, I had infinite reloading in Chrome with closed Web Inspector.

Then I googled it and I'm here. There is no solution for my problem, so I googled further.

I found this: https://stackoverflow.com/a/41936320/766307

Then I changed devtool property to eval-cheap-source-map and problem is gone. Vue Devtools is working.

carbdias · 2023-11-30T08:35:21Z

I have this same issue without using pwa-module, just Nuxt 3 and Vue 3 and Vite, in 2023. I cannot refresh the page without getting an infinite loop in all browsers in Mac, and I always have to close the tab, clean cache and do a crtl+C and relaunch server again to see new results on the web.

How coud I do this in Nuxt config in Nuxt 3 ?

build: {
devMiddleware: {
headers: {
'Cache-Control': 'no-store',
Vary: '*'
}
}
}

danielroe · 2023-11-30T10:21:51Z

@carbdias I would suggest opening a new discussion rather than commenting on an issue closed 3 years ago (where it may unfortunately get lost)

mathix420 · 2024-04-08T16:09:48Z

I've been having this issue for the last few days but with chrome while using a cloud ide & a cloudflare tunnel.

The fix for me was to turn on "Development Mode" in cloudflare under "Caching > Configuration > Development Mode" which disables all caching on that side of things.

I assume this bug has something to do with a conflicting cache/header expectation for the dev server.

In my case this was not an option as my tunnel was defined in a sub domain used by other apps.
I've identified that the issue was also coming from pwa-module, so here is what I did to fix the issue:

Disable cache for the subdomain only using a cache rule: Caching > Cache Rules > Create Rule > (http.host eq "my.sub.domain") > Bypass cache
Redirect PWA manifest to a 404 page: Rules > Transform Rules > Rewrite URL > Create Rule
- When incoming requests match (http.host eq "my.sub.domain" and starts_with(http.request.uri.path, "/_nuxt/manifest."))
- Rewrite to > Static _nuxt/404.json

ghost added the cmty:bug-report label Sep 1, 2018

manniL closed this as completed Sep 1, 2018

manniL mentioned this issue Sep 2, 2018

Hot Reload make page not load anything till restart of server nuxt-community/pwa-module#88

Closed

manniL reopened this Sep 4, 2018

manniL assigned galvez Sep 26, 2018

stale bot added stale and removed stale labels Oct 31, 2018

stale bot added the stale label Nov 23, 2018

manniL removed the stale label Nov 23, 2018

This comment has been minimized.

Sign in to view

manniL added the pending label Jan 5, 2019

manniL changed the title ~~Hot reload reloads forever~~ safari: infinite loop when hot reloading Jan 5, 2019

kuwiki pushed a commit to kuwiki-project/wiki-nuxt that referenced this issue Jan 31, 2021

hot reloading bug in Safari

49d3a82

nuxt/nuxt#3828

pi0 reopened this Mar 3, 2021

pi0 removed the pending label Mar 22, 2021

danielroe self-assigned this Mar 23, 2021

danielroe added a commit that referenced this issue Mar 23, 2021

fix(server): don't cache .js files in dev mode

3729bdd

* fixes reload loop on safari (closes #3828)

danielroe mentioned this issue Mar 23, 2021

fix(server): avoid caching .js assets in development to fix HMR for safari #9034

Merged

2 tasks

pi0 closed this as completed in #9034 Mar 23, 2021

pi0 mentioned this issue Apr 1, 2021

v2.15.4 #9088

Closed

command-tab mentioned this issue May 30, 2021

Nova preview cache tommasongr/nova-vue#32

Closed

danielroe added 2.x pending triage labels Jan 18, 2023

aduth mentioned this issue Apr 13, 2023

Avoid caching for webpack dev server resources 18F/identity-idp#8205

Merged

safari: infinite loop when hot reloading #3828

safari: infinite loop when hot reloading #3828

Comments

ydnar commented Sep 1, 2018 • edited

Version

Steps to reproduce

What is expected ?

What is actually happening?

manniL commented Sep 1, 2018

aldarund commented Sep 1, 2018

manniL commented Sep 1, 2018

ydnar commented Sep 4, 2018

Aric-sky commented Sep 13, 2018 • edited

Norbz commented Sep 14, 2018

galvez commented Sep 14, 2018

yoyo837 commented Nov 30, 2018 • edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

bovas85 commented Dec 14, 2018

This comment has been minimized.

felixdenoix commented Dec 26, 2018 • edited

sabithpocker commented Dec 29, 2018 • edited

valera-rozuvan commented Jan 3, 2019 • edited

schrockwell commented Jan 7, 2019 • edited

danchristian commented Jan 8, 2019

liepaja commented Jan 17, 2019 • edited

manniL commented Dec 9, 2020 • edited

horaciosolorio commented Dec 9, 2020

fabiom91 commented Dec 10, 2020

elielr01 commented Jan 30, 2021

revolter commented Feb 10, 2021

JeremyJaydan commented Feb 22, 2021

blaadje commented Mar 3, 2021

pi0 commented Mar 3, 2021 • edited

revolter commented Mar 3, 2021

pi0 commented Mar 23, 2021

lorenzofiamingo commented Mar 25, 2021

danielroe commented Mar 25, 2021

lorenzofiamingo commented Mar 25, 2021

danielroe commented Mar 25, 2021

Grawl commented Dec 17, 2021 • edited

carbdias commented Nov 30, 2023 • edited

danielroe commented Nov 30, 2023

mathix420 commented Apr 8, 2024

ydnar commented Sep 1, 2018 •

edited

Aric-sky commented Sep 13, 2018 •

edited

yoyo837 commented Nov 30, 2018 •

edited

felixdenoix commented Dec 26, 2018 •

edited

sabithpocker commented Dec 29, 2018 •

edited

valera-rozuvan commented Jan 3, 2019 •

edited

schrockwell commented Jan 7, 2019 •

edited

liepaja commented Jan 17, 2019 •

edited

manniL commented Dec 9, 2020 •

edited

pi0 commented Mar 3, 2021 •

edited

Grawl commented Dec 17, 2021 •

edited

carbdias commented Nov 30, 2023 •

edited