safari: infinite loop when hot reloading

ydnar
50
ydnar
commented 2 years ago

Version

v1.4.2 (or latest 2.0.0 pre code)

Steps to reproduce

  1. Launch dev server via yarn dev (HOST=0.0.0.0 nuxt)
  2. Load http://localhost:3000/
  3. Edit code, any code. Watch the nuxt dev server recompile everything.
  4. Reload
  5. HMR fails, triggering rapid reloading of the entire page, forever, until Safari kills the tab for excessive CPU usage.
  6. 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.

bug
0
manniL
7.0k
manniL
commented 2 years ago

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

0
aldarund
998
aldarund
commented 2 years ago

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

0
manniL
7.0k
manniL
commented 2 years ago

@aldarund See https://github.com/nuxt-community/pwa-module/pull/60#issuecomment-407008485. This should be an issue of pwa-module, not nuxt-core itself.

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

0
ydnar
50
ydnar
commented 2 years ago

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

0
Aric-sky
0
Aric-sky
commented 2 years ago

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

0
Norbz
23
Norbz
commented 2 years ago

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

0
galvez
4.5k
galvez
commented 2 years ago

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

0
yoyo837
63
yoyo837
commented a year ago

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

default

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

0
bovas85
115
bovas85
commented a year ago

is there a fix for this? Safari is breaking on prod for me

0
manniL
7.0k
manniL
commented a year ago

This shouldn't happen on prod 😱

@bovas85 can you reproduce it somehow?

0
smith64fx
100
smith64fx
commented a year ago

I have the same issue, only on Safari πŸ˜…

This issue is very important, if it even breaks prod o_O

0
bovas85
115
bovas85
commented a year ago

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

0
papakay
0
papakay
commented a year ago

Please i'm having the same issue on Safari 12.0

0
felixdenoix
5
felixdenoix
commented a year ago

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

0
sabithpocker
0
sabithpocker
commented a year ago

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)

screenshot 2018-12-29 at 10 02 08 pm
screenshot 2018-12-29 at 10 09 14 pm
screenshot 2018-12-29 at 10 10 54 pm

0
valera-rozuvan
0
valera-rozuvan
commented a year ago

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.

0
schrockwell
0
schrockwell
commented a year ago

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.

0
danchristian
0
danchristian
commented a year ago

I get this too, same as above, only killing the tab solves it πŸ˜•

0
liepaja
0
liepaja
commented a year ago

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

0
manniL
7.0k
manniL
commented a year ago

Hey πŸ‘‹

Is this still reproducible on v2.4.0?

0
schrockwell
0
schrockwell
commented a year ago

Confirmed, the issue still occurs on Nuxt 2.4.0 and Safari 12.0. :(

0
pi0
37.3k
pi0
commented a year ago

I can confirm @yoyo837:

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

0
pi0
37.3k
pi0
commented a year ago

The important key for reproduction is:

  • Make an error that opens overlay
  • Make another error that does not cause reload but overlay
  • Fix it
0
pi0
37.3k
pi0
commented a year ago

#4895 should resolve this problem.

0
lbogdan
0
lbogdan
commented a year ago

@pi0 But that does not explain what's happening with the nuxt sandbox, where there's no changes.

@_everybody I'm willing to look into this, if you can provide me with a remote connection (TeamViewer or similar) to a machine where this can be easily reproduced.

0
manniL
7.0k
manniL
commented a year ago

Fun fact: This is a bug in safari itself.

https://github.com/vuejs/vue-cli/issues/1132

0
rodrigopedra
0
rodrigopedra
commented a year ago

There is a PR in the vuejs repo addressing this issue:

https://github.com/vuejs/vue-cli/pull/2403

Also, I have this problem in Firefox when I set a preference to block cookies from third-party trackers. If I change to any other values the reload loops no longer occurs

To set this option in Firefox, open Firefox and navigate to:

about:preferences#privacy

Then change Content blocking to custom, check the cookies checkbox and select "third-party trackers" from the combo box next to it.

Maybe in Safari it is related to the tracker prevention feature it has built-in. I don't own a Mac, so I cannot try to disable this feature to test if it solves it.

If this is the cause, maybe we have to change how hot-reloading keeps track of it in the browser.

0
manniL
7.0k
manniL
commented a year ago

@rodrigopedra So, the thing is we used hashes for development mode file names too (in 1.x) but they were causing huge memory leaks. And releasing a "fix" that creates another known problem is not the goal.

0
rodrigopedra
0
rodrigopedra
commented a year ago

Hi @manniL thanks for the response. I wasn't aware of these changes made from the 1.x, although I worked with Nuxt before in a previous project, I was hired just to refactor some components and didn't dig into the inner workings as I wasn't responsible for that.

Now I am in a project where we are using Nuxt 2.x and are building the app from scratch, so I got the chance to have a deeper look into it.

I agree that reverting a change that solved a memory problem is not something to be pursued, but I don't know if using hashes to avoid caching is the only way to solve this problem. From what I could check the problem occurs when using latest Safari or Firefox with tracking blocked. Maybe there are other config we could hack to have these browsers behave better when this feature is on.

Are there caching related headers we could send with the HMR updates up so these browsers doesn't see this feature as a kind of tracking?

I don't have enough knowledge to tell why this issue happens. But I guess the evidence on the blocking trackers feature these browsers have is a good clue on how to solve it.

If I can help in any ways please let me know.

0
manniL
7.0k
manniL
commented a year ago

@rodrigopedra I know @pi0 tried to send all possible combinations of "no cache" headers and Safari consecutively ignored them πŸ™ˆ

I think a report to the browser(s) bug tracker is the best we can do for now. It should also apply to more projects than just Nuxt.js but I wasn't able to find similar bug reports besides the one linked above from vue-cli (where Evan stated it's a Safari bug as well).

Workarounds:

0
chinafzy
0
chinafzy
commented a year ago

Same problem.
node v8.12.0
Nuxt.js v2.6.2
Safari v12.0.3

0
manniL
7.0k
manniL
commented a year ago

Closing as workaround is known and we can't do much more here :| See https://github.com/nuxt/nuxt.js/issues/3828#issuecomment-464675623

0
federicovezzoli
10
federicovezzoli
commented a year ago

Hi guys, sorry but the build.filenames fix breaks everything.
And I really don't understand how to apply the rate limiting PR, tried the serverMiddleware, but breaks everything.

Anyone could shed some light?

thanks

0
aldarund
998
aldarund
commented a year ago

@manniL filenames workaround could lead to memory leaks. Didnt really tested, but webpack warns about it
WARN Notice: Please do not use hash in dev mode to prevent memory leak

0
manniL
7.0k
manniL
commented a year ago

@manniL Yes, that's why we removed that setting by default. :)

0
aldarund
998
aldarund
commented a year ago

poor safari users end up with either infinite loop or memory leak

0
smith64fx
100
smith64fx
commented a year ago

😒

Dmitry Molotkov notifications@github.com schrieb am Sa. 18. Mai 2019 um
17:31:

poor safari users end up with either infinite loop or memory leak

β€”
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/3828?email_source=notifications&email_token=AAYYVPTX4UHIE5GHQHDC4DTPV7EHRA5CNFSM4FSX7NZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVWLECY#issuecomment-493662731,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAYYVPV7IRTWA5DNFU3HLS3PV7EHRANCNFSM4FSX7NZA
.

0
aldarund
998
aldarund
commented a year ago

fyi - i have did some testing and with build.standalone: true there seem to be no memory leak with hash

0
ladislavsulc
0
ladislavsulc
commented a year ago

I had the same problem now with the latest version in Opera (in anonymous mode it works) and this helped: https://user-images.githubusercontent.com/13877593/43817835-66dc5e94-9a90-11e8-84a1-6e42e06e2015.png.

0
tbredin
0
tbredin
commented 10 months ago

I have this issue in latest Chrome.

A clue: just like the above comment β€” it doesn't happen if I open it in an incognito window …

I'm new to nuxt so having a very tough time debugging this unfortunately

nuxt: "^2.4.0"
node: v10.15.3
Chrome: 74.0.3729.169
0
valera-rozuvan
0
valera-rozuvan
commented 10 months ago

@manniL Maybe it's time to re-open this issue?

0
ChristianKienle
0
ChristianKienle
commented 10 months ago

I also just ran into the same issue (I think). I can reproduce it with a minimal project. It basically just is

yarn create nuxt-app

and it happens as soon I create the first page.

0
agcty
0
agcty
commented 9 months ago

I also experience this issue but only with Safari

0
Ic3m4n34
0
Ic3m4n34
commented 9 months ago

I also experience this issue but only with Safari

Me too!

0
valera-rozuvan
0
valera-rozuvan
commented 9 months ago

This issues will soon reach 1 year old mark. It still annoys devs :) @manniL maybe time to re-open and re-investigate?

0
valera-rozuvan
0
valera-rozuvan
commented 9 months ago

@pi0 , @clarkdo : do you guys experience similar issue on your local dev machine?

0
clarkdo
14.0k
clarkdo
commented 9 months ago

@valera-rozuvan As @manniL 's comment above https://github.com/nuxt/nuxt.js/issues/3828#issuecomment-464675623, it's actually a safari bug, as a workaround you may try to use @pi0 's solution.

Or change filename in dev mode (this may lead to memory leak as discussed above), like:

// nuxt.config.js
export default {
  build: {
    filenames: {
      app: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js',
      chunk: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js'
    }
  }
}

As @pi0 is working on new architecture of server, so the memory leak may be fixed in v3, then the [hash] can be added as default value of dev bundle files.

0
FeatureSpitter
0
FeatureSpitter
commented 9 months ago

This solution above worked for me, and I was having this same problem in Chrome 75.0.3770.100 (64 bits), when using NGINX to expose my npm run dev as HTTPS (more details here: https://stackoverflow.com/questions/56966137/how-to-run-nuxt-npm-run-dev-with-https-in-localhost).

Thanks @clarkdo !

0
Leskd
0
Leskd
commented 9 months ago

@clarkdo It's not worked for me. I was having this same problem in Chrome 75.0.3770.100.

nuxt: "^2.8.1"
node: v10.15.3
Chrome: 74.0.3729.169
0
clarkdo
14.0k
clarkdo
commented 9 months ago

Could you provide a reproducible repo?

0
Leskd
0
Leskd
commented 9 months ago

@clarkdo I will provide it. wait a moment please

0
Leskd
0
Leskd
commented 9 months ago

@clarkdo It's weird when I am prepaing a reproducible repo. I test again, It's normal now. Only I deleted is the .nuxt folder. then I deleted

filenames: {
      app: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js',
      chunk: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js'
    }

too.
It's work.
finally thank you

0
preom
0
preom
commented 7 months ago

FWIW I am in a similar boat to https://github.com/nuxt/nuxt.js/issues/3828#issuecomment-498518622. I am also getting this issue in chrome but not in incognito mode. I've already tried isolating the problem by process of elimination but the problem seems to come and go. I don't really want to waste anymore time on this since there is a solution (incognito mode) and this doesn't seem to be affecting other people. Leaving this comment here so that if anyone else runs into this problem like me, at least they'll know they're not alone.

0
updatesvc
0
updatesvc
commented 7 months ago

This might help someone…
How i solved it:

  • Go to devtools
  • Go to Application Tab
  • On the left panel click clear storage
  • Then on right-click, clear site data

I'm using the nuxt/auth module, might have something to do with it.

0
istvanvasil
0
istvanvasil
commented 7 months ago

Had the same issue in Chrome until I updated it. Must have been linked to that specific version. Otherwise filenames: { app: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js', chunk: ({ isDev }) => isDev ? '[name].[hash].js' : '[chunkhash].js' } solves this problem

0
AJB99
0
AJB99
commented 3 months ago

Same issue here.

Is there any plan to resolve this?
Has this been accepted as a bug?

Nuxt is not an option if this keeps happening.

0
kkostov
0
kkostov
commented a month ago

A "safari bug" was mentioned above, could anyone point to it on the webkit bug tracker? Or was there a radar report to Apple? I tried to look it up but frankly I don't understand webpack enough to know what to look for…

0
hfnukal
0
hfnukal
commented 23 days ago

Same issue. I have to press [CMD]+[e] (clear cache) [CMD]+r

0
airterjun
0
airterjun
commented 3 days ago

Hi guys, is someone finds the solution, I have the same issue here,
It's happening when I added middleware into my nuxt.config.js

nuxt.config.js
... router: { middleware: 'checker' } ...
middleware/checker.js
export default function (context) { console.log("param", context.params) }

my page route
image

image

But when I removed the middleware from nuxt.config.js is working find, need help to solve this problem,

thanks a lot

0
Informations
Bug Report β€’ Open
#c7666 - Created 2 years ago