Nuxt.js: safari: infinite loop when hot reloading

[ydnar]

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.

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

[manniL]

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

[aldarund]

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]

@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

[ydnar]

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

[Aric-sky]

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]

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]

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

[yoyo837]

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]

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

[manniL]

This shouldn't happen on prod 😱

@bovas85 can you reproduce it somehow?

[smyth64]

I have the same issue, only on Safari 😅

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

[bovas85]

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

[papakay]

Please i'm having the same issue on Safari 12.0

[felixdenoix]

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

[sabithpocker]

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]

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]

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]

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

[liepaja]

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

[manniL]

Hey :wave:

Is this still reproducible on v2.4.0?

[schrockwell]

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

[pi0]

I can confirm @yoyo837:

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

[pi0]

The important key for reproduction is:

• Make an error that opens overlay
• Make another error that does not cause reload but overlay
• Fix it

[pi0]

4895 should resolve this problem.

[lbogdan]

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

[schrockwell]

@lbogdan I was able to make a minimal Nuxt project that recreates the issue. It includes steps to reproduce (intermittently, in this particular case): https://github.com/schrockwell/nuxt-issue-3828

In summary:

1. npm run dev and open the index page in Safari 12
2. Uncomment // syntax error; in this file, save it, and observe the expected compilation error
3. Re-comment // syntax error; to successfully compile, then stare into the HMR abyss!
4. If you get "Module build failed" at this point, repeat steps 2 and 3 and then refresh the page and try again. In this example repo, it's intermittent to get it to occur.

From what I can tell, it comes down to forcing HMR to do a full reload, but somehow Safari caches and displays the old version of the page, which wants a full HMR reload, and so on. If you get stuck in the reload loop and change the page HTML content, you'll see that it does not update accordingly - you will get either the old version of the page, or maybe quickly flashing between the old and new content, depending.

[manniL]

Fun fact: This is a bug in safari itself.

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

[rodrigopedra]

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.

[manniL]

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

[rodrigopedra]

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.

[manniL]

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

• The Rate Limiting PR (#4895) will "solve" the problem
• You can change the build.filenames attribute on your own (example over here: https://github.com/schrockwell/nuxt-issue-3828/pull/1)

[chinafzy]

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

[manniL]

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

[federicovezzoli]

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

[aldarund]

@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

[manniL]

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

[aldarund]

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

[smyth64]

😢

Dmitry Molotkov [e-mail] 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
.

[aldarund]

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

[ladislavsulc]

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.

[tbredin]

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

[valera-rozuvan]

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

[ChristianKienle]

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.

[agcty]

I also experience this issue but only with Safari

[Ic3m4n34]

I also experience this issue but only with Safari

Me too!

[valera-rozuvan]

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

[valera-rozuvan]

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

[clarkdo]

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

[FeatureSpitter]

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 !

[Leskd]

@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

[clarkdo]

Could you provide a reproducible repo?

[Leskd]

@clarkdo I will provide it. wait a moment please

[Leskd]

@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

[preom]

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.

[updatesvc]

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.

[istvanvasil]

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

[AJB99]

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.

[kkostov]

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

[hfnukal]

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

[airterjun]

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

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

thanks a lot

[DengSihan]

Same issue

Only nuxt.config.js but issue still happened in Chrome and Firefox

module.exports = {
    srcDir: __dirname,
    watchers: {
        webpack: {
            aggregateTimeout: 300,
            poll: 1000
        }
    }
}

Sometimes it works well, but sometimes it just loop refresh.
Maybe it's a webpack related issue?🤔

nuxt 2.12.2
webpack 4.42.0
node 14.3.0
npm 6.14.5

[yoyo837]

Same issue

Only nuxt.config.js but issue still happened in Chrome and Firefox

module.exports = {
    srcDir: __dirname,
    watchers: {
        webpack: {
            aggregateTimeout: 300,
            poll: 1000
        }
    }
}

Sometimes it works well, but sometimes it just loop refresh.
Maybe it's a webpack related issue?🤔

nuxt 2.12.2
webpack 4.42.0
node 14.3.0
npm 6.14.5

What does 'Only Nuxt.config.js' mean?

[DengSihan]

Same issue
Only nuxt.config.js but issue still happened in Chrome and Firefox

module.exports = {
    srcDir: __dirname,
    watchers: {
        webpack: {
            aggregateTimeout: 300,
            poll: 1000
        }
    }
}

Sometimes it works well, but sometimes it just loop refresh.
Maybe it's a webpack related issue?🤔
nuxt 2.12.2
webpack 4.42.0
node 14.3.0
npm 6.14.5

What does 'Only Nuxt.config.js' mean?
My project only has a nuxt.config.js.
Sorry for poor English, I not a native specker

[simplenotezy]

@valera-rozuvan As @manniL 's comment above #3828 (comment), 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.

I don't see @pi0's solution anywhere here. Anyhow, I tried to add your code to nuxt.config.js, but it doesn't solve the issue:

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

[simplenotezy]

Going incogntio-mode however seems to work..

[Jemaz]

Going incogntio-mode however seems to work..

I can confirm that that infinite loop when hot reloading does not work in Firefox, but if it is incognito mode HMR works.

I haven't experienced the same issue on Chrome although (as in HMR works fine)

[theMangledBadger]

Running on:
Chrome: 83.0.4103.97
npm: 6.4.1
node: 10.15.0
nuxt: 2.12.2
webpack: 4.43.0

I had been experiencing this issue when I attempted to split my nuxt.config.js into separate config files, I've only started learning nuxt this week and I was probably trying to be too clever with it.

HMR wouldn't pick up latest changes and initially running npm run dev would cause the app to reload 3-4 times before failing altogether.

Example exported config:

const manifest = {
    name: 'XYZ',
    short_name: 'XYZ',
   etc....
};
  export default manifest;

And then in my nuxt.config.js, importing as

import manifest from '~/config/manifest.js

export default {
    ... // standard nuxt config ,
    firebase,
    axios,
    **manifest**, 
    etc

I had tried clearing the cache, incognito mode, clearing application storage and Safari & Opera.

Reverting back to include everything in the nuxt.config.js file seems to have resolved the above issues.

I'm not sure if it is linked, but it appears to have been resolved for me this way, if anyone else has tried the same approach.

*_Edited. Twice. Still learning how to comment, it seems!_

[mrkswrnr]

What finally worked for me was the following in my nuxt.config.js:

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

[ibdf]

What finally worked for me was the following in my nuxt.config.js:

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

This bug was driving me crazy! So far, this solution has worked for me.

[subaru304]

I am not using pwa module.
This issue happens only on Safari for me. :<

[rahulnuo]

Getting the same thing in Safari only. Still the same issue after adding the devMiddleware fix Attaching the Screenshot here..