Nuxt Local Server Gets Stuck

[sdras]

Version

v2.9.2

Reproduction link

https://github.com/sdras

Steps to reproduce

It's a non-deterministic error, so it can be a bit hard to duplicate. There are two main causes of frustration from what I see:

1. The HMR doesn't really work well, and you'll see an older, cached version of the site, even after restart. I believe this thread is the same issue: https://github.com/nuxt/nuxt.js/issues/5550
2. Sometimes the local dev server gets stuck- perhaps on a bug, but you are locked out of the app. Also non-deterministic conditions. Sample of this sent to Sebastien. I left the repro link just to my github because it's a project I'm not ready to share publicly yet. I'm extremely low on time so I'm hoping this will suffice. If you really need a public link, I can get you one but it might be a while before I can provide it.

What is expected ?

1. Server to reflect the changes in the app, especially after restart
2. Local dev server to load even if there is an error

What is actually happening?

1. The app gets cached in a particular state. After you restart it, sometimes after as much as 4 times, it works again
2. The server just keeps reloading and reloading (you just see the loading screen and it starts over). One major problem is that it clears the console as well, so even if it is running into a user error problem, it's hard to track down.

Additional comments?

I've been experiencing this bug since 2.6.*. It happens quite frequently. A few friends have complained to me about it as well. I love Nuxt! I don't want to leave it but my productivity is starting to suffer.

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

[pimlie]

Unfortunately I am unable to indicate one specific cause, but while looking into this I found multiple possible issues. If I read your descriptions to the letter then in some cases they do not fully compare, so there might still be other contributing factors

• Webpack does not remove old chunk files after a hot reload, if you set build.devMiddleware.writeToDisk: true in your nuxt.config and check the .nuxt/dist/client folder you will see the old files still being listed.
• That doesnt explain why old files are served after a server restart. Only thing I can think off which is persistent after a restart is that both babel-loader as esm are caching files in node_modules/.cache. Possibly one of them believes somehow the old caches are still valid. You could try to remove the node_modules/.cache folder to see if thats the case
• Nuxt.js still adds an ETag header in development mode. If you are using a proxy middleware/server then in combination with your browser cache this could maybe also make your browser think the old cache files are still valid. Try to refresh the page with the debug console open and make sure to have ticked Network -> Disable cache (both Chrome as FF).
• The referenced issue above could've been a contributing factor after running the dev server for some time. Dont immediately see how it would cause any problems though
• If for some reason Nuxt.js is unable to render your page at all (ie renderRoute returns a falsy value), then the Nuxt Loading Screen will be served instead. Normally this should only happen when webpack is still building, but maybe somehow its also possible that webpack fails silently causing Nuxt.js to be unable to render a page even when the webpack build has finished. If this would occur, then previously the loading screen would be endlessly reloading itself to try to serve your Nuxt.js app which will fail all the time so it'd fallback to the loading screen again. This behaviour should be fixed in @nuxt/loading-screen v1.1.0, it now limits itself to 5 reloads after which it displays an error message. If you manually reload the page it will again limit itself to 5 automatic reloads.
• If you are running Node v12 and are debugging some stuff by logging a full VueComponent server side, Node.js contains an issue which causes node to hang
• When you soft-kill nuxt (which could mean it keeps running in the background) and start a new nuxt build, then on nuxt start it will detect the port from your config (if you have any) is still blocked by the old process and automatic start listening on a new random port. If you then dont update this port manually in your browser tab, you will still be connecting with the old Nuxt instance instead of the new Nuxt instance
• With regards to the console log being cleared, if you load the page in Chrome and enable Preserve log in Settings of the Console tab (gear icon to the right) then all logs should be retained. FF also has a Persists Logs option but in contrast to Chrome this doesn't prevent console.clear calls (the nuxt loading screen calls this).

How does your typical dev env (platform, browser, node version etc) and nuxt config look like? Do you extend the webpack config? While working on this it seems similar issues have often been reported to webpack(-dev/hot-middleware).

I dont think we are ready yet to call this issue resolved, the things that I fixed appear to be more effects then causes. But I am not sure where to look anymore as I am unable to reproduce the issues exactly as described.

[sdras]

Hey @pimlie, thank you for all of your time and work on this! Much appreciated. I just added you to the private repo where it's hanging and reloading so you can clone and see as well.

I'm using

• Chrome Version 76.0.3809.132 (Official Build) (64-bit)
• Mac, I'm on Mojave, MacBook Pro 2018
• Node v12.6.0
• You can see my nuxt.config.js, I have several plugins: highlightjs custom directive, vue-tags-input, and firebase

I hope that helps track it down. I spoke to two more devs this week who were having the same problem, if you would like, I can ask them if they still have the repos in the stuck state before they bailed if that gives you more information.

[pimlie]

Thanks, I tried some stuff on your repo but unfortunately I couldnt get the dev server to hang. Either the work I did wasnt representative to trigger this issue or maybe its just a Mac OS issue (im on linux).

One Mac OS issue related to webpack watching I came across is this: https://stackoverflow.com/questions/26708205/webpack-watch-isnt-compiling-changed-files. But thats quite old, so no idea if its still an issue at all.

I hate seeing people leave Nuxt.js because of issues like this, but except for trying to get my hands on a mac I'm not sure how to debug this further

[frellan]

I experience this issue as well, and it's starting to be really annoying. The dev server just hangs and does not respond, just a pending request. I do not get any log errors or what so ever, it just does not respond and Chrome is waiting forever. I have not been able to get my server to respond now for more than 30 minutes. Sometimes it works if I restart, sometimes not.

[pimlie]

@frellan Could you please share the details of your dev env?

How many open tabs to the dev server do you have? Please check if you can connect to Node from an incognito Chrome window. If you could record a screencast of when the issue occurs that would be very interesting as well. Am interested to see the contents of both the console as network tab of your browser debug console. Furthermore, please check if Node is busy or not when Chrome is waiting. Does it run at 100% cpu?

[gkkirilov]

It happened to me yesterday but fixed itself after a few minutes. I was able to open it in incognito mode. If I get it again I will report with more info.

[pimlie]

@gkkirilov If you are able to open the page in a new incognito window then you have hit the maximum connection limit a browser instance can have to a single domain. I think for FF this is 3 by default and for Chrome 5

[BridgeAR]

Just a heads up: Node.js v12.11.0 fixes the Node.js bug mentioned above. Please give that a try in case you are using Node.js v12.x.

[pimlie]

I noticed another issue which could make the dev server appear to be stuck, build errors in dev mode were not shown on the loading screen. That meant the loading screen stayed at 0% progress and the used had to think themselves about maybe looking at the console to see why nothing appears.

Have submitted a pr to change this behaviour so errors during the Nuxt build are also shown on the loading screen: https://github.com/nuxt/nuxt.js/pull/6475

[jake-101]

I have had this issue since I started a new project using version 2.10. Sometimes when I inspect the CSS in Chrome, there are no properties. The service worker or socket gets stuck I believe but I am not sure.

[sdras]

I have the same issue as Jake, above. I just updated to Node v12.11.0 and the issue is persisting. I can get it to clear whatever is cached and start updating again in an incognito window most of the time (not always) but then I don't have access to Vue Devtools. Also, the local server still gets stuck even if it's just one tab, it doesn't have to be many/multiple. Hope that helps track things down!

[pimlie]

@jake-101 Whats your dev env? Mac, Win/WSL or Linux?

I know this might be asking a bit much but if anyone could record a performance profile when this occurs then that would be helpful. To do so in chrome open the dev console, click on tab Performance and hit record. Once the hanging occurs, try to fix it somehow and once fixed hit stop on the recording. Click on Save profile... (downvote button) to retrieve the profile and please share that.

Otherwise a detailed screencast of when this occurs could also be helpful, for it to be really helpful it would need to show:

• error console of developers console (scrolled down to current log)
• network tab of developers console (scrolled down to current request)
• nuxt console
• top command in terminal (or something else that show cpu/memory usage)

[jake-101]

@pimlie MacOS. I will try to record the profile and/or do a recording of the error happening in the next couple days.

[connecteev]

Thank you @sdras for filing this issue and @pimlie for looking into it. I've been experiencing this issue multiple times a day for months...and only today decided to finally do something about it and log an issue. Fortunately, it's already been filed here and there are several others experiencing this issue of HMR not working well / consistently.

Here's some additional info that might help. I'm on a mac, using the latest Chrome. Nuxt version 2.x node -v: v10.16.2 npm -v: 6.12.0

    "@nuxtjs/auth": "^4.8.2",
    "@nuxtjs/axios": "^5.6.0",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.0.0-beta.17",
    "nuxt": "^2.0.0",

Made some changes and it built on the nuxt server (server logs below)

> nuxt --port 3000


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.9.2                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                               12:30:47
ℹ Initial build may take a while                                                                                                                                                                  12:30:47
✔ Builder initialized                                                                                                                                                                             12:30:47
✔ Nuxt files generated                                                                                                                                                                            12:30:47

✔ Client
  Compiled successfully in 39.86s

✔ Server
  Compiled successfully in 38.69s

ℹ Waiting for file changes                                                                                                                                                                        12:31:32
ℹ Memory usage: 331 MB (RSS: 520 MB)        

But this is what I see in the chrome console:

VM3083:1 GET http://localhost:3000/_nuxt/ab5a9cc2c078b3a3628b.hot-update.json 404 (Not Found)
(anonymous) @ VM3083:1
(anonymous) @ runtime.js:83
hotDownloadManifest @ runtime.js:74
hotCheck @ runtime.js:293
check @ vendors.app.js:15895
push../node_modules/webpack-hot-middleware/process-update.js.module.exports @ vendors.app.js:15860
processMessage @ vendors.app.js:15737
handleMessage @ vendors.app.js:15597
handleMessage @ vendors.app.js:15560
vendors.app.js:12923 warn [HMR] Cannot find update (Full reload needed)
value @ vendors.app.js:12923
value @ vendors.app.js:12923
value @ vendors.app.js:12923
(anonymous) @ vendors.app.js:12923
cb @ vendors.app.js:15869
(anonymous) @ vendors.app.js:15899
Promise.then (async)
check @ vendors.app.js:15898
push../node_modules/webpack-hot-middleware/process-update.js.module.exports @ vendors.app.js:15860
processMessage @ vendors.app.js:15737
handleMessage @ vendors.app.js:15597
handleMessage @ vendors.app.js:15560
vendors.app.js:12923 warn [HMR] (Probably because of restarting the server)
value @ vendors.app.js:12923
value @ vendors.app.js:12923
value @ vendors.app.js:12923
(anonymous) @ vendors.app.js:12923
cb @ vendors.app.js:15870
(anonymous) @ vendors.app.js:15899
Promise.then (async)
check @ vendors.app.js:15898
push../node_modules/webpack-hot-middleware/process-update.js.module.exports @ vendors.app.js:15860
processMessage @ vendors.app.js:15737
handleMessage @ vendors.app.js:15597
handleMessage @ vendors.app.js:15560
vendors.app.js:12923 warn [HMR] Reloading page

The page just sits around forever and spins.

[connecteev]

Also just thought of this...a few times when this has happened, I saw a "waiting for socket connection" or similar message. Hope this helps narrow things down..

[pimlie]

The waiting for socket connection is probably just caused by the connection limit that Chrome has, you can only connect max 5 times to the same server. Try to open a new incognito tab if this happens or close some open tabs to the dev server if you have them

[clarkdo]

@sdras @connecteev Thank you for reporting the issue and all the investigation.

I have some guesses, could you try to turn off indicator by build.indicator: false and test ? I’ll look into it this weekend, sorry for the inconvenience.

[Janne252]

I started having this issue earlier today. It occurred on multiple freshly created nuxt projects with very minimal setup (just a config, layout, a page, and one plugin). I've been able to "fix" is twice so far by roughly completing the steps below:

1. Starting point: nuxt 2.10.1 app, doesn't work (does 5 refreshes and then displays the error message)
2. Delete buildDir (defaults to .nuxt in the same directory as nuxt.config.js) and node_modules
3. Change nuxt version to 2.8.0 & npm install
4. run nuxt & Test the app on the browser - seems to work!
5. Stop nuxt
6. Delete buildDir (defaults to .nuxt in the same directory as nuxt.config.js) and node_modules
7. Change nuxt version to 2.10.1 (latest version at the time of writing this comment) & npm install
8. run nuxt & Test the app on the browser - seems to work! But why?!

Steps

I've done countless clean npm install runs without changing the nuxt version - the issue persisted. Somehow downgrading the version & upgrading it back up worked for me. I think it's worth trying if anyone currently has a directory where this issue occurs. I've been testing this with a rather minimal setup meaning that going that many versions back didn't break anything else.

Logically doing such clean installs with different versions shouldn't have an effect as all files and caches are stored in the project's node_modules directory (?). As I stated in the beginning, the trick has worked twice so far. Now I can't seem to be able to re-create the bug anymore with setups that previously triggered it.

[enzonotario]

It seems to be a problen of cache. I had the same problem, but just running in another port everything works fine, for example npm run dev -- --port 3001

[clarkdo]

@sdras Through my several days investigation and loads of times debugging, it look like the sever hanging issus it related to chokidar underlying I/O race condition and macOS.

Fortunately, it seemed the issue has been tracked and fixed in https://github.com/fsevents/fsevents/pull/290 , I've verified the fix in my local with latest fsevents.

You could just rebuild your yarn.lock or package-lock.json , nuxt will auto-use the latest chokidar and fsevents

[galvez]

@clarkdo amazing work, mate. The community owes you.

Where's your sponsor/PayPal page? I'd like to buy you a beer or two.

[Janne252]

@clarkdo

it look like the sever hanging issus it related to chokidar underlying I/O race condition and macOS.

I've been having this issue on Windows 10. If the issue reappears I'll try

You could just rebuild your yarn.lock or package-lock.json , nuxt will auto-use the latest chokidar and fsevents

And report back.

[sdras]

Thanks @clarkdo! I will try it out this week and report back. Appreciate your help here.

[aldarund]

@Janne252 i guess you are just facing limit of connection to one host. Chrome cant open more than 5 connection to same host, and all new will hang. To verify try to open in another browser when its stuck in chrome or in chrome anonymous tab

[Janne252]

@aldarund

i guess you are just facing limit of connection to one host. Chrome cant open more than 5 connection to same host, and all new will hang. To verify try to open in another browser when its stuck in chrome or in chrome anonymous tab

At the time I was googling quite a lot and came across the same suggestion (try another browser). Unfortunately the issue persisted on a Chrome Incognito tab & on Microsoft Edge which suggests the issue was on the build side. If it recurs I'll try other browsers before resetting package-lock.json.

[clarkdo]

@Janne252 Sorry, I may need to clarify, the fix in fsevents I mentioned above is macOS only since fsevents is api for MacOS FSEvents, so if your issue is in Windows, it should be some reason else. It would be great that if you can provider a stable producible repo so that we can look into the root cause.

[Janne252]

@clarkdo That's what I figured from the description & the original issue on fsevents. Just the similarity & timing of the issue makes it seem like it's the same thing. As I explained in my first comment on this thread; downgrading and upgrading nuxt version weirdly fixed the issue. As if there's some cache outside of local project node_modules directory affected by the nuxt version.

Thanks for all the suggestions. I'll report back if the bug occurs again. Unfortunately it appears to be a rather elusive one on Windows.

[theCrius]

Hey, just reporting here that I can confirm it's pretty much a constant when I start the dev server for the first time every morning. I've to manually kill the process and launch again and somehow then it doesn't end up hanging. Windows machine (unfortunately stuck with it) with Nuxt.js v2.10.2

This is an extract of the network panel of chrome dev console:

I basically get 4/5 reload as soon as the app start, then the latest request hangs. Even after the pending request has been canceled or failed. The app doesn't behave properly (probably because some code is not loaded? I'm guessing from all the 404 I get before that point).

Opening a new tab/window just doesn't load the app at all as the request just hangs.

[clarkdo]

@theCrius Thank you so much for the info, but it's kind of hard to guess what is the root cause of your issue without further investigation.

Is there any possibility that you can provide a minimal reproducible repo so that we can look into exact issue ?

If it's impossible, could you use chrome tools like https://dev.chromium.org/for-testers/providing-network-details to capture the frontend connection amount, and also dump a CPU profile for node process via tools like https://nodejs.org/de/docs/guides/debugging-getting-started/#inspector-clients ?

[theCrius]

I cannot provide a working repo as the project is a SPA, not so complex but with plenty of components that are strictly working with a backend and set of data coming from an external backend.

In any case, next time I run into this issue I'll run the network details and report back

[sibbng]

I was have this issue ~1 month ago on 2.9.x. Interestingly after few days this issue is gone. Then i upgraded to 2.10.x when it is released. As far as i know it is also have a fix for that issue. But as i said, my issue is gone after few days before upgrading to 2.10.x. Anyway, this morning this issue is come back. I didnt even ugrade or installed something or change nuxt config. I'm just editing my components.

When i save my component, hmr is breaks and when i try to refresh, it is keeps loading.

I'm using Chrome when all of this things happens. Interestingly, i can view my project on Firefox at the same time Chrome is stuck on loading and hmr is never breaks on Firefox.

[mhajder]

I have the same issues. Bug still exist.

[StensenE]

Same her @mhajder

[StefKors]

I've been having similar issues, it seems that removing the .nuxt folder and restarting the dev server helped getting unstuck.

Perhaps it's a cache issue?

[mhajder]

I've been having similar issues, it seems that removing the .nuxt folder and restarting the dev server helped getting unstuck.

Perhaps it's a cache issue?

Yes, that's the only option. But it is in production for me.

[clarkdo]

Hi all, if you're having similar issue, it would be great if you can provide more details and a reproducible repo, it will help us a lot to find your issue's root cause.

Thanks a lot.

[sibbng]

Interestingly this issue is came today completely different. My server stuck during development and when try to restart it give me permission error about .nuxt folder. To remove this folder i had to use third party software. But it didnt help. After first run same error. Cloned my repo to different folder. Everything is fine now.

Edit: Also i tried removing yarn lock and node modules but didnt help.

[Darkside73]

I have this issue as well. The development experience is really suffering. "Clear site data" is a temporary solution by now. But I'm forced to do it every 10-15 minutes as hot reloading is hanging chrome over and over again

Env: Ubuntu, Node 10.17.0, Nuxt 2.10.2

[sibbng]

I was have this issue ~1 month ago on 2.9.x. Interestingly after few days this issue is gone. Then i upgraded to 2.10.x when it is released. As far as i know it is also have a fix for that issue. But as i said, my issue is gone after few days before upgrading to 2.10.x. Anyway, this morning this issue is come back. I didnt even ugrade or installed something or change nuxt config. I'm just editing my components.

When i save my component, hmr is breaks and when i try to refresh, it is keeps loading.

I'm using Chrome when all of this things happens. Interestingly, i can view my project on Firefox at the same time Chrome is stuck on loading and hmr is never breaks on Firefox.

Looks like my issue in here is about browser. I tested on Chrome Stable and Canary with/without extensions. Extensions doesnt change anything.

Chrome Stable 78.0.3904.108: Stuck after navigating few pages. Chrome Canary 80.0.3972.0: Doesnt stuck. Firefox: Doesnt stuck.

[yue4u]

I had this issue today and stuck on Firebox developer and Chromium. Both running in another port and removing the node_modules/.cache can fix the problem for me.

Firebox developer | 71.0b11 (64-bit) Chromium | 78.0.3904.108 (Official Build) Arch Linux (64-bit) Env: Arch Linux x86_64 , Node v13.1.0, Nuxt 2.10.2

[garyrvaz]

For me, removing @nuxtjs/stylelint-module from my nuxt config allowed my app to build.

[TylerOrtiz]

Echoing the same issue and resolution: My client build would never complete (and would keep hot reloading); removing the @nuxtjs/stylelint-module did fix this.

[clarkdo]

/cc @ricardogobbosouza

[sdras]

Looking more at this, I believe it has something to do with the service worker. That's why when you put it into incognito, it works again. I think something gets b0rked with the service worker that's used for HMR, and it's not able to reconcile the changes. Digging more into this whenever it gets stuck, hoping to find a solution.

[garyrvaz]

@sdras it wasn't working for me even in incognito, as I mentioned in this comment that @nuxtjs/stylelint-module removal worked for me.

For me, removing @nuxtjs/stylelint-module from my nuxt config allowed my app to build.

[sdras]

Interesting, @YuuwakU. I don't think that's everyone's problem, though, because I am not using it, and there are a lot of other people having this issue on a fresh install. 🤔Helpful to know, though!

[garyrvaz]

@sdras yeah, and another observation was that with the create-nuxt-app the package.json versions are weird, for eg, nuxt version will be ^2.0.0 while it will install the latest nuxt version. Even the nuxt module versions are older than the latest stable ones. Haven't checked if this issue has been raised before or not, just thought this piece of information may also be helpful to investigate.

[moltar]

I am also having these issues. A few things I noticed:

This happens more often if more tabs are open. Meaning hot reload has to reload several tabs. Maybe each tab creates a request, and thus somehow hangs.

I also see that Chrome sometimes hangs without even having reported any requests in the network tab.

[stevenferrer]

I was also having this issue, I selected all the linting tools (ESLint, Prettier, Lint staged files, StyleLint) and then when I run yarn dev, I get stuck in the initial loading of Nuxt. I re-created the project and I selected all the linting tools except for StyleLint option and it worked.

[Addcasanova]

@stevenferrer True, the same thing happened to me, re-creating the project without stylelint no longer gets stuck when rendering the view of the folder Page. Thank you.

[sdras]

This is all really helpful. :) But I'm not sure we're really going to solve the issue unless we figure out why it's behaving this way, linter or not. Still trying to find the source, open to more suggestions.

[Darkside73]

I don't have a stylelint-module. But the issue keeps bugging me

[ricardogobbosouza]

The @nuxtjs/stylelint-module really crashed when there is no configuration file eg stylelint.config.js. This has been fixed on v3.1.1

[vdjurdjevic]

I have same issue with: Nuxt 2.10.2, Node: 12.12.0, Typescript: 3.7.2, and using TSX for components and @vue/composition-api with 'vca-jsx' babel plugin. When i change TSX in render function, in console it prints [HMR] bundle rebuilding and then browser refreshes whole app (i guess interupts HMR in the middle).

[DispatchCommit]

Has anyone tried just typing rs into the console when it gets slow or stuck? I've found when I am debugging a component and creating lots of HMR updates that have or cause errors it'll slowly start to load slower and slower. A quick rs to restart nodemon has been the quickest and easiest way I've found. works every time without the port getting stuck or other weird issues.

[Janne252]

This issue (5 reloads) appeared on Windows 10 again after upgrading from nuxt 2.10.2 to 2.11.0. Attempts to remove node_modules and buildDir followed by clean npm install and npm run dev did not help.

Following these steps fixed the issue: https://github.com/nuxt/typescript/issues/152#issuecomment-542659708

I now remember I managed to fix the same issue a few weeks ago by installing all major dependencies one by one to see at which point the build would get stuck (5 reloads). It never did, very likely because I accidentally completed the steps linked above.

[MetaBureau]

Adding a port to package.json solved it for me. "dev": "cross-env NUXT_PORT=3333 NODE_ENV=development nodemon src/server/index.js --watch server", More info here: https://nuxtjs.org/faq/host-port I'm using express as server and on a mac.

[FelixRe0]

Our dev team experienced the same issue. Firefox was loading scripts (I.e. Google Analytics), nuxt loads infinetly and after some time we got a chunk loading failed error in the console. Missed to Screenshot the console and today the issue has not appeared again. We have noticed that behavior multiple times before but a restart of the nuxt server fixed it. Yesterday it reappeared many times when nuxt router was called. We definetly had multiple tabs open, but not sure how many.

[theCrius]

Just reporting that this keep happening and it's making working with Nuxt quite a pain.

Freshly started computer, npm run dev, open chrome, first page of the app load up, then stuck the loading animation. Tried going on Firefox, same behaviour.

We don't have the @nuxtjs/stylelint-module so it's not a fix for the problem (it may be for some, but there must be something else going on).

Trying an rs doesn't work as the console seems to not accept any input. Running on Windows 10 (not an option to change OS unfortunately).

windows: 10.0.18362 npm 6.2.0 node 10.9.0 nuxt 2.10.2

[cbernard73]

Just to add another data point:

Mac OS 10.15.1 NPM 6.13.6 Node 13.2.0 Nuxt 2.11.0

It was working normally, I made some changes to the head section of nuxt.config.js and I resized some images, and then it stopped working. I restarted Nuxt, and I deleted .nuxt directory, but that didn't fix it. I reverted all my changes (even the images), but that didn't fix it either. Nothing in the console to indicate what the problem might be. A vanilla installation of nuxt - no plugins at all.

I then ran a Hello-World type Nuxt application which worked fine, and now my app is working again.

[Janne252]

I'm able to consistently reproduce this issue on Windows 10. I created a repository with instructions and handy .bat scripts that automate the testing.

The repository can be found at https://github.com/Janne252/issue-reproduction-nuxt-6442 Quick summary of its contents:

• install-at-once.bat demonstrates the Failed to show Nuxt.js app after 5 reloads issue.
• install-in-series.bat demonstrates a workaround that results in a working development build.

[snapwich]

Can confirm, had this issue on my windows machine just now (but not on my mac) and using the install order provided by @Janne252 fixed my local nuxt development server.

Edit - Deleted my node_modules and .nuxt on my mac and did fresh npm install of project, bug reproduces on mac as well; so this appears to be OS independent.

[jillztom]

Same issue -

The solution that worked for me was:

• Shutdown the nuxt server
• Restarted the IDE (used the inbuilt terminal in Atom)
• Restarted the nuxt server

Worked like a charm!

[kitmoovup]

I have the same issue.

MacOS 10.15.3 Nuxt 2.11.0

[moosecodes]

Same issue, the only thing to solve it was to change the base url in the nuxt config.

Also, really peculiar, not sure if others are seeing this, but it only happens to me in Chrome. Even when I stop the servers and delete any dist or .nuxt folders, the browser seems to find the site on my local.

It loads my app but then quickly switches over to the default vue app view when a new project is generated. Happens on every reload.

Version 80.0.3987.100 (Official Build) (64-bit) MacOS Catalina 10.15.3 (19D76)

[jaysaurus]

I wanted to mention something that may be related to this issue. I was finding my server was hanging when built for production/demo. After a process of elimination, I found the cause was where I had provided a second argument in a middleware:

export default function ({ error, route, store, params }, foo = undefined) {
...
}

I was using this 2nd argument instead of declaring a let foo in the body of the function. By changing this to:

export default function ({ error, route, store, params }) {
  let foo
  ...
}

the issue was resolved

[tettoffensive]

I'm having this issue on one of my development machines, but not the other. Both macOS Catalina. Can confirm it works from an incognito window. But shows an old version of the website in Chrome and Safari. And hangs when you try to reload

[xerosanyam]

restarting OS solved this problem for me. I think some zombie process is getting created on file change

[tettoffensive]

Nice. Restarting did not fix the issue for me.

[jaysaurus]

This feels like it could be a server-side gotcha, so I'll mention the below in the hope that it's useful:

Nuxt will hang if its server side can not access your remote resources via Axios/your ajax client. I was seeing my demo nuxt deployment hanging in the browser without rhyme or reason until I realised it was only hanging when the server side was trying to make ajax requests. When I ran a wget on the server hosting nuxt to the same api endpoints, I discovered that requests from the box were hanging because of a local firewall. Unlike a purely client-side webapp, this is an extra consideration one must make on "Universal" nuxt apps: If the box on which you're running Nuxt isn't able to access the remote resources you're requesting, Nuxt will hang any time it makes an ajax request from its server side.

[tettoffensive]

@jaysaurus Thanks, that's useful to know. However, in my case it works fine if I use an incognito browser window. It only fails to dynamically refresh in a normal browser window on 1 of my dev machines (I have 2 macs), the other everything works fine.

[jaysaurus]

Another thought, appreciating that it's a long-shot, are you connecting to remote services that share the same url? e.g. remote resoure: 'foo.com/api/bar' nuxt app: 'foo.com/front-end'

if you have a link marked as something like '/api/bar' for some reason, nuxt will try to treat it as a route. I've seen this cause some very weird and sporadic behaviour before.

[tettoffensive]

@jaysaurus No. really not sure why it's happening. I believe it to be something with Chrome caching. Even though I have caching off in the Developer tools. Because I just ran it through the Visual Code Chrome Debugger which launches a different instance of Chrome and it works fine.

[jaysaurus]

Appreciating that I'm clutching at straws (and perhaps for the posterity of future queries): my previous comment counts for serving image sources as well (for example, i have some dynamic image endpoints on my build that will draw stuff like a padlock over an image. These are served from a grails application on the same address as the nuxt server (managed under-the-hood by a load-balancer, DNS, etc.) These images can also be served via nuxt's server side. Ergo, the server must have permission to access remote assets whether for css (e.g. background-image:) or <img src="..." />

[ilp]

Possible answer: https://github.com/nuxt/nuxt.js/issues/6007

[ImSeaWorld]

Having this issue on Chrome. It takes 15 minutes to reload the page. FireFox/Edge is a different story. I can refresh it all day long. I do not have any more than 2 open tabs at a time and consistently happens using the dev script ("dev": "nuxt"). Running npm run start won't have this issue. Reading the posts above, it's not intermittent like some others have been having. I don't get any issues other than missing map files, no debug output of any kind. Little back story, wrote a VueJS app, saw Nuxt and it's offerings and converted over. Not sure if I'm doing something wrong, but as I said, works in FireFox/Edge just fine.

Microsoft Edge: v44.18362.449.0 FireFox: v76.0.1 (64-bit) Chrome: v83.0.4103.61 (Official Build) (64-bit) OS: Windows 10 Pro (v1909 b18363.836) NPM: v6.14.5 Node: v14.0.0 Nuxt: v2.0.0

[es5es5]

Same issue here.

MacOS 10.14.6 Nuxt v2.12.2 Node v12.17.0 Npm 6.14.5.

[theCrius]

We simply switched off of Nuxt.

Can't have this kind of behaviour when you are developing application for production.

[pimlie]

@ImSeaWorld If you dont have issues with nuxt start then its most likely related to the often mentioned limit of ~5 connections by your browser to the same domain. You can confirm this next time by starting a private/incognito session for your browser and try to connect.

@theCrius Thats sad too hear. Unfortunately it seems we just cannot reproduce this issue reliably and up to now nobody in this thread has been able to help us to make a reliable reproduction.

To summarize the state of this issue:

• There is/was an fs-events bug on MacOS thats causing this: see this comment
• If this only happens in dev mode its likely related due to the connection limit

  :heavy_check_mark: Start a new private/incognito browser session to verify this

Reproduction needed

At this moment we don't have any reason to believe there is more to this issue then the above two things. But I would be happy to be proven wrong, if anyone can create a reliable reproduction then please do. I might be a bit cocky here but if people stop using Nuxt.js because of this I assume it shouldn't be that hard to make a reproduction?

[theCrius]

@pimlie ~5 limit connection is a false clue. I've experienced this issue with a freshly started computer and just a chrome tab open to the localhost's port of the application. The thing that made us simply abandon adoption is that the issue is clearly windows focused (meaning chrome on windows, or the windows os itself) but when none of the reporter had the ability to branch out and investigate or resolve the issue, there are not hint of the core dev team attempting to check on it.

Nuxt sell itself as a "production ready" framework for Vue, possibly the "main" one but if the core dev team is not willing to invest some time in resolving a bug like this, there is little trust to be have that they will do it in the future when other issues will arise that are not easily reproducible in their "expected" environment.

Not everyone in the industry use fancy mac or much more reliable linux machines. Some have to deal with company policy the demand a windows machine, as unfortunate as it is.

I understand that an open source project given for free is not something someone can pretend something out of, but if you pride yourself in being production-ready, you need to sustain that claim.

[pimlie]

@theCrius I am totally sustaining the claim that Nuxt.js is production ready

And I do not think that your message is fair to anyone who has contributed to the Nuxt.js ecosystem. If you look back in to this issue you will see I have already spent 2+ full days on this issue and I know @clarkdo has too.

But lets not fall into a discussion about semantics, let me say another thing that I cannot stress enough:

Help us to help you

Please create a reliable reproduction including any hardware or software requirements that describes step-by-step when the issue happens.

As developers we probably all know what information another developer needs to debug / resolve an issue. Unfortunately nobody I work with on a day to day basis is experiencing these issues, so this means I cannot investigate this myself. So we really need your help with that.

Open source is not about being free but about being able to collaborate on the project. To work together to improve the software which we all benefit from.

[sdras]

Thanks for your work so far here, we all appreciate your time.

I did add you to a repo where I could reproduce the problem, and others could too when they cloned it, and I'm not sure there was any followup there. As I mentioned to you in person, I'm working on tracking it down when I can as well, but have limited time at the moment.

[ImSeaWorld]

@sdras Could I get added to the repo? Would save me time :)

[sdras]

Absolutely, let me go find it and I'll add you.

[pimlie]

Thanks @sdras, also really appreciate the time you invested in this issue. As mentioned at the time I couldn't reproduce the error myself with your repo although I did found some other issues related to the loading screen with could contribute to it. But @clarkdo did and found that fs-events issue which should be resolved by now.

[sdras]

@pimlie is right, if he can't reproduce, it's up to us who can to track down the issue. Let's all try to dig a little deeper than "I deleted this, it's gone" and question why that happened, because even the file and library deletion hasn't seemed to be that deterministic either.

I actually haven't personally seen an occurance of this in the past few months, but I'll try to set aside time next time I do.

[theCrius]

Open source is not about being free but about being able to collaborate on the project. To work together to improve the software which we all benefit from.

I knew I was going to trigger someone with that comment. I know full well that open source is not "free stuff boys!" and whoever manage to work on a project with thousands (and more) adoption have all my respect, if nothing for just the clear skills they have that are far superior to mine.

About the reproduction: it's a nice fable, that 90% of the time, used to not have to deal with an issue as, unless someone is doing some hobby project, the repo to provide would be something used by a company and, of course, sharing that is not really possible the vast majority of time. And, if someone was just doing a side project, I can assure you he will just switch library over the weekend and not bother having to deal with this.

In the 86 comments here, surely there is enough to start to understand at least where to look for. First thing I would have done is set up a windows crappy laptop or vm and have a script keep launching the server, try to connect and if succeed, shut it down and start again.

I could do it myself but apart from that, I wouldn't know where to look for in case I find an occurrence of the issue which is, apparently, random (and we know there is no such thing as this).

As much as there is absolutely no ground to demand anything at all from the core dev team of an open source free project, there is also the more than valid response of being disappointed when you adopt it because it claims to be a stable production ready solution, saves having this issues.

If we, who are no ones really, decided to just drop it, you can be sure it's not just for this specific issue. This was just one of the worst offender.

Now we are going definitely out of scope here, so I will just stop replying.

[pimlie]

@theCrius Yeah, you got me.

My previous message was indeed maybe a bit strong as I let my emotions get the better of me, I apologize if anyone was offended by that

Unfortunately if you are sure you are not hitting the connection limit of your browser but Nuxt still apears stuck, then the message stays mostly the same. If you can reproduce this stuck behaviour locally but are unable to create a reproduction that works reliably, feel free to contact me on discord if you want to pair up debugging it

With regards to the connection limit issue, that is being addressed in #7286 by @pi0. You can watch that PR to be notified about updates.

[zsid]

My server was stuck and I updated this issue. I have just started a new project and it wasnt working. I was using node version 10.14.0. I updated my node version to 12.17.0 which is the most up-to-date one now and hot reloading is working fine.

Curious to see what results are people seeing if they change their node version. Here is my repo which I have just created following the installation guide.

[theCrius]

@theCrius Yeah, you got me.

My previous message was indeed maybe a bit strong as I let my emotions get the better of me, I apologize if anyone was offended by that

Unfortunately if you are sure you are not hitting the connection limit of your browser but Nuxt still apears stuck, then the message stays mostly the same. If you can reproduce this stuck behaviour locally but are unable to create a reproduction that works reliably, feel free to contact me on discord if you want to pair up debugging it

It's all good @pimlie, we are humans and I know full well how pretentious some people are towards free open source projects so I fully expected someone to react the way you did. No hard feeling here.

The company I work for dropped nuxt but that doesn't mean I did. We are in the middle of quite complicated times now and things are frenetic more often than not. When I'll get back some more free time, I'll definitely try to use nuxt for some small personal projects and see if I run in this weird behaviour again, even if my personal pc run a linux distro so, I don't really know.

Hope others will manage to provide some more insight over time and this damn issue is resolved once and for all.

Have a good week :)

[nakedgun]

I recently started hitting this issue myself with a new nuxt project (create-nuxt-app). HMR broke immediately / refreshing the browser hangs. I am aware of the 5 tab connection limit but it wasn't this. The only thing which fixed it (not even an OS restart) was unregistering the nuxt service worker (which I believe is from the @nuxtjs/pwa module). Funnily enough, the broken project didn't have the pwa module installed - it was from a different local Nuxt app.

This fixed it for me:

1. type: about:debugging#workers in the address bar (firefox) or chrome://inspect/#service-workers in chrome
2. find the nuxt service worker for the current port of your app:

3. Click unregister firefox or terminate in chrome. In Firefox, even if the icon is not green, still click unregister
4. Kill the nuxt app / relaunch it / restart your browser

result: HMR works perfectly again.

I suspect there are multiple ways HMR gets stuck and this is only one of them. But for what it's worth, I've never had a problem with Nuxt HMR - and it only started misbehaving when I started switching between multiple nuxt projects more (with different setups - SPA/Universal/Universal + PWA).

Some logs:

08:20:33.583 Failed to load ‘http://localhost:3000/__webpack_hmr/client’. A ServiceWorker intercepted the request and encountered an unexpected error. workbox-routing.prod.js:1:868
08:20:33.583 The connection to http://localhost:3000/__webpack_hmr/client was interrupted while the page was loading. vendors.app.js line 270 > eval:88:13
08:20:33.583 Firefox can’t establish a connection to the server at http://localhost:3000/_loading/sse. app.js line 323 > eval:103:17
08:20:33.584 Error: Manifest request to /_nuxt/8d270078ac8fe24b9be8.hot-update.json timed out. runtime.js:92:16
08:24:27.692 Firefox can’t establish a connection to the server at http://localhost:3000/__webpack_hmr/client. vendors.app.js line 270 > eval:88:13

I hope that helps someone!

[ImSeaWorld]

@nakedgun This fixes the loading issue for me, not permanently anyway. It survives 1 refresh before I need to terminate it again. One thing that was made clear by this was that multiple service workers were being loaded. Multiple instances seemed to be creating a hydration issue on all the UI components. Terminating does solve my hydration issues and everything for a single instance.

Great find, I'm hopeful this will help narrow down what the issue is.

[HunderlineK]

I have this issue on macOS 10.14.6 Happens on any browser and once it happens none of the different browsers work.

It just happens randomly and the server stops responding; have to restart the server before it works again.

[HunderlineK]

This looks relevant: https://github.com/vercel/next.js/issues/10061#issuecomment-632077342

[bogdanbucur]

I also had this issue. I develop a Nuxt app which is also used in production. Locally I develop on macOS and I was using the 2.11.0 version of NuxtJS in a Docker environment with a base image using node:12.17.0-alpine3.9.

I have updated the Node version to node:13.14.0-alpine3.11, but I had to roll the Nuxt version back to 2.9.0 in order to resolve this issue. I have tested the app in dev and prod mode and it's working without issues.

Currently, the latest version of Nuxt is 12.13.0, but the issue still persists with that version.

[dsteinbach]

Only happens when i have the local app open in more than one tab.

[bigsee]

I know this might be asking a bit much but if anyone could record a performance profile when this occurs then that would be helpful. To do so in chrome open the dev console, click on tab Performance and hit record. Once the hanging occurs, try to fix it somehow and once fixed hit stop on the recording. Click on Save profile... (downvote button) to retrieve the profile and please share that.

Otherwise a detailed screencast of when this occurs could also be helpful, for it to be really helpful it would need to show:

• error console of developers console (scrolled down to current log)
• network tab of developers console (scrolled down to current request)
• nuxt console
• top command in terminal (or something else that show cpu/memory usage)

@pimlie I still experience this issue fairly regularly and managed to record a performance profile. Would it still be helpful for me to share it at this stage or have we moved on from there in the investigation?

[yuruyuri16]

I fixed this by setting baseUrl for axios in nuxt.config.ts.

[vedmant]

I have the same problem, it starts when I call error method from fetch(), it shows error page then page starting to refresh itself multiple times and then backend just stuck and not loading anymore until I restart dev server. I have latest version 12.13.0. Node v12.16.3.

[aweber1]

A possibly related issue was found and resolved by the Next.js folks in chokidar and webpack:

https://github.com/paulmillr/chokidar/pull/1018 https://github.com/webpack/webpack/releases/tag/v4.44.0

https://twitter.com/timneutkens/status/1282129714627448832