Nuxt Local Server Gets Stuck #6442
Comments
|
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
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. |
|
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
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. |
|
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 |
|
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. |
|
@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. |
|
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. |
|
@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 |
|
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. |
|
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: #6475 |
|
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. |
|
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! |
|
@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 Otherwise a detailed screencast of when this occurs could also be helpful, for it to be really helpful it would need to show:
|
|
@pimlie MacOS. I will try to record the profile and/or do a recording of the error happening in the next couple days. |
|
Thank you @sdras for filing this issue and @pimlie for looking into it. Here's some additional info that might help. I'm on a mac, using the latest Chrome. Nuxt version 2.x Made some changes and it built on the nuxt server (server logs below) But this is what I see in the chrome console: The page just sits around forever and spins. |
|
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.. |
|
The |
|
@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 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:
StepsI've done countless clean Logically doing such clean installs with different versions shouldn't have an effect as all files and caches are stored in the project's |
|
It seems to be a problen of cache. I had the same problem, but just running in another port everything works fine, for example |
|
@sdras Through my several days investigation and loads of times debugging, it look like the sever hanging issus it related to Fortunately, it seemed the issue has been tracked and fixed in fsevents/fsevents#290 , I've verified the fix in my local with latest You could just rebuild your |
|
@clarkdo amazing work, mate. The community owes you. Where's your sponsor/PayPal page? I'd like to buy you a beer or two. |
I've been having this issue on Windows 10. If the issue reappears I'll try
And report back. |
|
Thanks @clarkdo! I will try it out this week and report back. Appreciate your help here. |
|
@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 |
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 |
|
@Janne252 Sorry, I may need to clarify, the fix in |
|
@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 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. |
|
I've had similar problems to this on nuxt3 😂 I just run into issues where there's no errors and I can't figure out what package / component broke my build. |
|
to @davidawad |
|
For me the issue seems to be related to Nuxt Auth (auth-next 5.0.0 in my case, I didn't test the older stable version). As soon as I removed the auth module from my nuxt.config.js everthing started working fine again. |
|
I had to to comment out the |
|
I have no solution for this till the date, the socket seems to be stopped working, hot reloading is not working properly |
|
Sometimes Nuxt will hang out and keep loading and present a blank screen if you have more than 1 or 2 browser pages pointing to your app. Closing them and leaving only one seems to fix the issue. |
|
Precisely
|
|
Hi guys, is there an official fix to this issue? |
|
For me the problem was that I had another app running via docker on port 3000. |
|
@oshell You cannot run two apps on the same port. In your case you just were trying to open your other app that was up in 3000, while the Nuxt one was up on some other random port, I think. 🤔 |
|
Had the problem of hot reload not working. in the nuxt.config.js file source: #5550 (comment) |
Yup, upgrading from node 12.0 to node 12.22.12 fixed it for me. |
This works for me, thank you! |
|
I'm having an issue accesssing a webpage with RSelenium. I think it might be due to something like this (although I could be very wrong because I know next to nothing about nuxt). Details below. Basically, I can access the webpage (built with nuxt I think) fine myself, but if I try to access it with RSelenium, there is just a spinning loading circle forever. If anyone has any suggestions I would greatly appreciate it. The webpage is https://cear.tuftsmedicalcenter.org/registry/methods/5089 You can replicate it like this, if you have R and RSelenium set up: The sourcecode of the page it takes me to is: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D">
<head>
<title>Tufts CEA - Tufts CEA</title>
<meta charset="utf-8" data-n-head="1" />
<meta content="width=device-width,initial-scale=1" name="viewport" data-n-head="1" />
<meta content="" name="description" data-hid="description" data-n-head="1" />
<link href="/favicon.ico" type="image/x-icon" rel="icon" data-n-head="1" />
<link href="https://use.typekit.net/rhz2swc.css" rel="stylesheet" data-n-head="1" />
<link href="https://fonts.googleapis.com/css?family=canada-type-gibson:100,300,400,500,700,900&display=swap"
type="text/css" rel="stylesheet" data-n-head="1" />
<link as="script" href="/_nuxt/3a37233.js" rel="preload" />
<link as="script" href="/_nuxt/fc025f1.js" rel="preload" />
<link as="script" href="/_nuxt/358a0d4.js" rel="preload" />
<link as="script" href="/_nuxt/9070c62.js" rel="preload" />
</head>
<body>
<div id="__nuxt">
<style>
#nuxt-loading {
background: #fff;
visibility: hidden;
opacity: 0;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
animation: nuxtLoadingIn 10s ease;
-webkit-animation: nuxtLoadingIn 10s ease;
animation-fill-mode: forwards;
overflow: hidden
}
@keyframes nuxtLoadingIn {
0% {
visibility: hidden;
opacity: 0
}
20% {
visibility: visible;
opacity: 0
}
100% {
visibility: visible;
opacity: 1
}
}
@-webkit-keyframes nuxtLoadingIn {
0% {
visibility: hidden;
opacity: 0
}
20% {
visibility: visible;
opacity: 0
}
100% {
visibility: visible;
opacity: 1
}
}
#nuxt-loading>
div,
#nuxt-loading>
div:after {
border-radius: 50%;
width: 5rem;
height: 5rem
}
#nuxt-loading>
div {
font-size: 10px;
position: relative;
text-indent: -9999em;
border: .5rem solid #f5f5f5;
border-left: .5rem solid #000;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: nuxtLoading 1.1s infinite linear;
animation: nuxtLoading 1.1s infinite linear
}
#nuxt-loading.error>
div {
border-left: .5rem solid #ff4500;
animation-duration: 5s
}
@-webkit-keyframes nuxtLoading {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes nuxtLoading {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
</style>
<script>window.addEventListener("error", function () { var e = document.getElementById("nuxt-loading"); e & amp;& amp; (e.className += " error") })</script>
<div role="status" aria-live="polite" id="nuxt-loading" class=" error">
<div>Loading...</div>
</div>
</div>
<script>window.__NUXT__ = { config: {} }</script>
<script src="/_nuxt/3a37233.js"></script>
<script src="/_nuxt/fc025f1.js"></script>
<script src="/_nuxt/358a0d4.js"></script>
<script src="/_nuxt/9070c62.js"></script>
</body>
</html> |
|
Here are the browser warnings in case that's helpful. |
|
Switched to using the python selenium wrapper and it's working fine. Might just be an RSelenium issue |
Thank you ! |
|
This issue was closed because it was open for 7 days without a reproduction. |
|
I have a similar problem, my Nuxt v2.17.1 project, when I open it from Chrome it stays loading (load spinner appears), and it takes 3-15 seconds to fully load the app. I have SSR disabled. In incognito and guest mode this does not happen or in other browsers. It is worth mentioning that I have no extensions installed. I tried over and over again clearing cache and all browser data but the same thing keeps happening. My version of Node.js v16.16.0 In fact, I create a whole new project from scratch and the same thing happens: I get the Loading spinner. I have uninstalled and reinstalled Chrome several times from scratch (even older versions), I have even removed the keys that the browser generates in regedit but the problem persists. In my nuxt.config.js I set the load value to 'false' and it still shows up. I tried on another computer and the load is immediate, the spinner is not shown. So this "error" is kind of weird. I tried changing the localhost port and nothing. I tried with Postman and the response is immediate, the only drawback is with Chrome. |
|
Have same issue, page loading around 15 seconds on Chrome and Edge, on FF works fine |
|
I have this same issue, my nuxt app does not display in the local host at all. All it shows is the Nuxt logo with the white-green gradient background. In my console it displayed this error: Does anyone have a fix to this issue please? |
|
If you're encountering an issue like this, please open a new issue with a reproduction. This is an old Nuxt 2 issue and not related to Nuxt 3. |
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:
What is expected ?
What is actually happening?
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.
The text was updated successfully, but these errors were encountered: