Next.js dev server gets stuck after a while, requests just spin

[mjm]

Bug report

Describe the bug

When I run my Next.js app with now dev, after a while (on the order of minutes, definitely less than an hour) my requests to it will stop working.

To Reproduce

I'm not sure how to isolate this one. It happens all the time with this project https://github.com/mjm/courier-js but it's not an easy thing to get running for reproduction.

1. Run now dev
2. Work on the app, making changes to files, saving, and watching them hot reload in the browser
3. Eventually, one of these changes will try to reload and will get stuck. The on-page indicator for a page compiling will be there and keep spinning continuously. Trying to refresh the page just causes the browser to try to load the page until it times out.

When I give up, I can hit Ctrl-C to try to kill the server, but if it's in this state, it can take a minute or two to actually get the message and quit.

Expected behavior

Continuing to make changes should keep working and trigger refreshes in the browser.

System information

• OS: macOS Catalina, though I think this happened before upgrading too
• Browser (if applies): I've seen in both Chrome and Safari
• Version of Next.js: 9.1.7, has happened in earlier versions of Next 9 as well
• Version of Now CLI: 16.7.3

Additional context

I feel like this could be TypeScript related, but I don't have any evidence. I'm on the latest release for that as well. I'm happy to try things that might help understand what's going on. The only thing I've seen in the log from now dev (or next dev I guess) is that it seems like when it gets in this state, it will stack up two or three "compiling ..." messages when there would otherwise be just one.

[timneutkens]

Might help to eliminate if it's now dev or next dev related by trying to run your app with just Next.js.

[jeantil]

Hi,

I have the exact same issue, after running next dev directly I don't have the issue anymore.

[MatteoGioioso]

Same issue here

[tetigi]

Likewise, same issue - seems intermittent and not tied to any particular change. It will work for a while, and then hang on the next change. Rerunning npm run dev again fixes it for a time, but it's a little irritating to have to continually reload.

next dev doesn't fix it for (same issue).

(FWIW I'm not using TS, just plain old JS)

[timneutkens]

I've figured out a way to reproduce this a bit, will try to solve the issue.

[cronokirby]

This seems to happen on a project I work on as well. Usually starts taking a lot of memory and CPU as well.

[timneutkens]

Having trouble consistently reproducing it to investigate, if you run into it please provide steps to reproduce or a repository, I'd love to investigate further but I could only investigate it about 5 minutes while trying for 2 hours.

[winjingjie96]

Hello I am facing the same problem too! Been learning Next for two hours now and I thought I installed it wrongly. The issue can be mostly reproduced (in my case) by writing incorrect React code so that it compiles with errors. After correcting it, the hot reload function goes abit wonky and I have to kill the dev server (sometimes multiple times) to get it to work again.

My dependencies are as follows: "dependencies": { "next": "^9.3.6", "nprogress": "^0.2.0", "react": "^16.13.1", "react-dom": "^16.13.1" }

Just for comparison, Gatsby's start script works extremely well on my computer (not sure if this is worth anything)

Should I downgrade from 9.3.6 to a stable version?

(This is my third month self learning coding so if I sound dumb I apologise)

next-portfolio.zip

[neupauer]

Hi, I have the exact same issue, even in the clean Next.js starter app (npm init next-app, no additional dependencies)

To Reproduce

Run npm run dev or next dev and then refresh the page few times (hit CMD+R quickly, at least 10 or more times) the dev server gets stuck (requests have a pending status)

System information

• OS: macOS Catalina, Version 10.15.4
• Version of Next.js: 9.4.2, I had the same problem in previous versions of Next.js
• All dependencies:

"dependencies": {
  "next": "9.4.2",
  "react": "16.13.1",
  "react-dom": "16.13.1"
}

Solution

I am not sure, but it seems to work in my case. When I start server with different port (not the default 3000) it works like a charm next dev -p 1234

[eandre]

I ran into this problem as well, and it was caused by an old cached service worker. I cleaned the cache completely (under dev tools -> application in Chrome) and the problem was fixed. Not sure if your problem is due to the same cause.

[pablopunk]

I've been dealing with this issue for a long time. Latest nextjs, fresh install of macOS 10.15.4, it happens all the time, it's a PITA.

The only thing that worked for me was @neupauer's solution, running dev server on another port (in my case npx next -p 1234 works).

🎉

[eandre]

@pablopunk have you tried cleaning out the cached service worker? That cache will be port-specific, so by changing the port you're working around the problem. Curious to see if this is the root cause for others or just for me.

[pablopunk]

@eandre I have and I think the issue came back eventually. Anyway, this is an issue on next.js and should be solved

[eandre]

Of course it should be solved! I'm just trying to help find the root cause. 🙂

[HunderlineK]

I'm having this issue with 'Vue' as well; so I wonder if it is not a next.js issue but a vercel dev issue

[jgillich]

@HunderlineK This also applies to next dev. But it's interesting that Nuxt has the same issue, might be some shared dependency that's causing this?

[pi0]

Hi :) Just to summarize there was/are 3 well-known issues which might be shared:

• https://github.com/fsevents/fsevents/pull/290
• Registered service worker (usually production mode) on same port and try to run dev
• Connection/Socket limit

Still, as there is no proper way to reproduce these were just some clues we found. It might be also a generic chrome bug.

[jgillich]

webpack-hot-middleware uses up one of the 6 connections via EventSource, and when all are used up it results in the browser being unable to establish more connections and therefore an infinite loading spinner: https://github.com/webpack-contrib/webpack-hot-middleware/issues/298

Maybe there's a rogue service worker that hogs up more and more connections over time and never releases them. Just guessing though.

[pi0]

@jgillich EvenSource is probably a cause. For nuxt there is also an additional SSE handler for loading-screen/indicator. (next release will use new port but it also brings its own problems...). Just to give some more context, previously we were using Websockets and the issue was less visible...

[HunderlineK]

@pi0 I have this issue on FF as well. In my case at least, once it happens, it just fails across all of the other browsers that I have i.e. Chrome, Edge and Safari.

I also know this only happens once there is a change in the source code.

I have also had this problem with using 'vercel dev' only for the API; i.e. I had my dev server separately setup for serving the front end and then vercel for the API and ended up in a situation where front end was working but API was stuck 🤷‍♂️

[pi0]

@HunderlineK I also experience that but I think it is another issue... Hope we can finally find root-cause(s) together :)

[opolo]

We are facing the same issue... Everytime we have a new release, our platform cannot load any new pages on the client machines until they refresh their cache. As we are a B2C company, its hard to notify and teach the users about this...

[timneutkens]

We are facing the same issue... Everytime we have a new release, our platform cannot load any new pages on the client machines until they refresh their cache. As we are a B2C company, its hard to notify and teach the users about this...

This sounds unrelated to the issue @mjm reported which only manifests in the development server, which I doubt you're running in production. Can you create a discussion on https://github.com/vercel/next.js/discussions with clear and concise reproduction steps.

[opolo]

Ah, thanks, will do!

[acha5066]

Running version: 9.3.5

One way this seems to continually happen is if I delete a file that is imported somewhere in my app, without removing the import statement. Doesn't seem to happen every time but that is the most common scenario where it has occurred. After that it usually gets stuck in the compiling stage.

I'm running the vercel dev command by the way.

[ColeTownsend]

FWIW, I'm experiencing this on zeit 9.4 with a customer server on both Chromium and Safari. I cleared my cache and also tried on incognito in both browsers.

Ran next dev, next dev -p XXXX, nuking the repo, nuking node_modules and .next, and changing my node version to various stops between 12 and 14.

Edit: Found it was the whyDidYouRender hitting a maximum event listeners.

[w3ea]

Version: 9.5.2

Same here after a while, especially when inspect is open, it gets stuck I tried to run it on the different port next dev -p * but didn't change

it's really annoying 😒

[samuanv]

+1 Running latest version (9.5.3) and I am getting this problem too. ~I think it might be related to Sass. When I comment out my global @import for external library styles it works properly.~ After the first change it hangs

[timneutkens]

Having trouble consistently reproducing it to investigate, if you run into it please provide steps to reproduce or a repository, I'd love to investigate further but I could only investigate it about 5 minutes while trying for 2 hours.

Posting +1 or "same issue" is not helpful. Please provide a reproduction so that it can be investigated.

[Temetias]

Yup happening to me too and all it takes to reproduce for me is just running npx create-next-app [project-name] and then trying to npm run dev that. So basically the starter seems to be unusable currently for me at least.

More info: npx next --version - Next.js v9.5.3 Browser - Firefox 80.0.1 OS - Windows 10, running the stuff in WSL (Tested running Sapper in the same port and it seems to be fine so I doubt it's related to my system there)

Hopefully this helps in the investigations.