Nuxt Local Server Gets Stuck

sdras
15
sdras
commented 7 months ago

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.

bug
0
pimlie
761
pimlie
commented 7 months ago

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.

0
sdras
15
sdras
commented 7 months ago

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.

0
pimlie
761
pimlie
commented 7 months ago

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

0
frellan
0
frellan
commented 7 months ago

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.

0
pimlie
761
pimlie
commented 7 months ago

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

0
gkkirilov
0
gkkirilov
commented 6 months ago

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.

0
pimlie
761
pimlie
commented 6 months ago

@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

0
BridgeAR
0
BridgeAR
commented 6 months ago

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.

0
pimlie
761
pimlie
commented 6 months ago

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

0
jake-101
5
jake-101
commented 6 months ago

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.

1
sdras
15
sdras
commented 6 months ago

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!

0
pimlie
761
pimlie
commented 6 months ago

@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)
0
jake-101
5
jake-101
commented 6 months ago

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

0
connecteev
0
connecteev
commented 6 months ago

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.

0
connecteev
0
connecteev
commented 6 months ago

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

0
pimlie
761
pimlie
commented 6 months ago

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

0
clarkdo
14.0k
clarkdo
commented 6 months ago

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

0
Janne252
0
Janne252
commented 6 months ago

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?!

<summary>Steps</summary>

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.

0
enzonotario
0
enzonotario
commented 6 months ago

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

0
clarkdo
14.0k
clarkdo
commented 6 months ago

@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

1
galvez
4.5k
galvez
commented 6 months ago

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

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

0
Janne252
0
Janne252
commented 6 months ago

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

0
sdras
15
sdras
commented 6 months ago

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

0
aldarund
998
aldarund
commented 6 months ago

@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

0
Janne252
0
Janne252
commented 6 months ago

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

0
clarkdo
14.0k
clarkdo
commented 6 months ago

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

0
Janne252
0
Janne252
commented 6 months ago

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

0
theCrius
0
theCrius
commented 5 months ago

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:

image

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.

0
clarkdo
14.0k
clarkdo
commented 5 months ago

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

0
theCrius
0
theCrius
commented 5 months ago

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

0
sibbngheid
0
sibbngheid
commented 5 months ago

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.

0
mhajder
0
mhajder
commented 5 months ago

I have the same issues. Bug still exist.

0
StensenE
0
StensenE
commented 5 months ago

Same her @mhajder

0
StefKors
0
StefKors
commented 5 months ago

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?

0
mhajder
0
mhajder
commented 5 months ago

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.

0
clarkdo
14.0k
clarkdo
commented 5 months ago

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.

0
sibbngheid
0
sibbngheid
commented 5 months ago

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.

0
Darkside73
40
Darkside73
commented 5 months ago

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

0
sibbngheid
0
sibbngheid
commented 5 months ago

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.

0
rainy-me
0
rainy-me
commented 4 months ago

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

0
YuuwakU
0
YuuwakU
commented 4 months ago

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

0
TylerOrtiz
0
TylerOrtiz
commented 4 months ago

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.

0
clarkdo
14.0k
clarkdo
commented 4 months ago
0
sdras
15
sdras
commented 4 months ago

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.

0
YuuwakU
0
YuuwakU
commented 4 months ago

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

0
sdras
15
sdras
commented 4 months ago

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!

0
YuuwakU
0
YuuwakU
commented 4 months ago

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

0
moltar
13
moltar
commented 4 months ago

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.

0
stevenferrer
0
stevenferrer
commented 4 months ago

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.

0
Addcasanova
0
Addcasanova
commented 4 months ago

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

0
sdras
15
sdras
commented 4 months ago

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.

0
Darkside73
40
Darkside73
commented 4 months ago

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

0
ricardogobbosouza
1.1k
ricardogobbosouza
commented 4 months ago

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

0
vladimirdjurdjevic
0
vladimirdjurdjevic
commented 4 months ago

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

0
DispatchCommit
0
DispatchCommit
commented 4 months ago

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.

0
Janne252
0
Janne252
commented 3 months ago

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.

0
MetaBureau
0
MetaBureau
commented 3 months ago

Adding a port to package.json solved it for me.
"dev": "cross-env NUXTPORT=3333 NODEENV=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.

0
FelixRe0
0
FelixRe0
commented 3 months ago

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.

0
theCrius
0
theCrius
commented 3 months ago

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

0
cbernard73
0
cbernard73
commented 2 months ago

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.

0
Janne252
0
Janne252
commented 2 months ago

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.
0
snapwich
0
snapwich
commented 2 months ago

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.

0
JillzTom
0
JillzTom
commented 2 months ago

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!

0
kitmoovup
0
kitmoovup
commented 2 months ago

I have the same issue.

MacOS 10.15.3
Nuxt 2.11.0

0
moosecodes
0
moosecodes
commented 2 months ago

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)

0
jaysaurus
0
jaysaurus
commented a month ago

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

0
tettoffensive
0
tettoffensive
commented 22 days ago

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

0
xerosanyam
0
xerosanyam
commented 16 days ago

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

0
tettoffensive
0
tettoffensive
commented 16 days ago

Nice. Restarting did not fix the issue for me.

0
jaysaurus
0
jaysaurus
commented 9 days ago

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.

0
tettoffensive
0
tettoffensive
commented 9 days ago

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

0
jaysaurus
0
jaysaurus
commented 9 days ago

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.

0
Informations
Bug ReportOpen
#c9797 - Created 7 months ago