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