nuxt: safari: infinite loop when hot reloading

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

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

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

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

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…

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

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.

@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

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.

@valera-rozuvan Probably trying this first.

https://github.com/nuxt/nuxt.js/issues/3828#issuecomment-658774154

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

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

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.

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

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.

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

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

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

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

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.

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

Going incogntio-mode however seems to work…

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…

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.

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

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

Same issue only in Safari

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

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)

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

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.

I also experience this issue but only with Safari

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.

2 years have passed - and this issue still bothers people. Software engineering is hard 🤣 @manniL what’s your recommendation for people getting here in 2021?

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

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.

Fun fact: This is a bug in safari itself.

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

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

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

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