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

[Amirbarzegari]

I had a similar problem, for me it was because I accidentally had created an asynchronous client component (switched from a server component and forgot to make it synchronous.) I didn’t get any error messages, just a loading page so it was a bit tricky to debug.

Thank you so much, was dealing with this bug for a weak. I think Next js should include a warning/error of some sort and close this issue.

[timothy-okoduwa]

i was having similar issue and i must say upgrading my node version to 18 didn't work, i even cleared cache still nothing what worked for me was renaming that component that was not responding to changes. My issue was coming from my signup component (i created a componet outside and passed it in my page.js

`import React from 'react';
import Signin from '../components/Signin';

const page = () => {
return (

);
};

export default page;
`

what i did was to change the name of the component (the Signin component was formally name Login) to the same name that the folder that acts as the route is bearing (which is Signin)

[mjey]

Changing dev port from 3000 to 3001 resolved my issue, so you should try as well

[SahilAggarwalHeliverse]

The point about Typescript, you are correct!
I faced the same issue recently where next.js was logging complied successfully but infinitely loading the webpage. I never imagined this could be because of Typescript. I actually created a custom type and using it in multiple files by exporting it from a file. Now, I am still figuring out why exactly is next.js showing this behaviour with custom types.
Did you find any clue?

[jobizzness]

@SahilAggarwalHeliverse you are on point. seems like ts is the issue here. removed custom types and it started working fine.

[patilanz]

same problem. Next compiles but no response is send to the browser.

I tried deleting .next node_modules, changing the port, updating node but didn't help.

Updating next from 13.4.19 to 13.5.4 solved the issue

[dayoolacodes]

For anyone struggling with this in 2023. Updating node to v18 solved the problem for me on Mac Pro m1 / Ventura

Thanks so much for this. This finally worked. This is the worst kind of error you want to have. There's no clue on the console or error thrown

[borg]

One page stuck. It's using <Script> to load a canvas js library. Loads fine for a while, then stops and no console logs showing at all...and no error logs.

Changed <Script> method from onLoad to onReady and that seems to work. Why server invokes onLoad only for a while I don't know. Maybe helps someone.

Update: Scratch that. It was up longer but eventually stopped rendering this page anyway.
Updated update: Finally narrowed it down to revalidate interval on the app/page. First build and validation runs fine, but somehow subsequent fails, but not seeing error logs. Only with a very short revalidate interval, running non-dev mode did I eventually get a clue.

"next": "13.5.4"

[leerob]

👋 Hey folks. Wanted to summarize this issue.

Some of you all are experiencing an issue where the Next.js development server gets stuck after a period of time, causing requests to fail or time out. It's tricky because the problem seems to occur intermittently and isn't clearly tied to any particular change or action. There's been reports across different operating systems and versions of Next.js.

Solutions / workarounds suggested throughout this issue:

1. Running the app with just Next.js next dev instead of vercel dev (we recommend doing this regardless)
2. Changing the port from the default 3000 to something else (e.g., running next dev -p 1234)
3. Clearing the cache, including service workers
4. Upgrading Node.js to version 18 or later
5. Deleting the .next folder and node_modules and then rebuilding the project
6. Having two instances of Next.js running simultaneously, terminating the extra process resolved the issue

Note that not everyone has been able to resolve the issue, and there isn't a one-size-fits-all solution that works in all cases. I encourage everyone to keep sharing their experiences and any potential fixes they come across. And if you are still seeing an issue and can consistently reproduce, please post that reproduction so we can investigate. Thanks!

[SebHex]

Solutions / workarounds suggested throughout this issue:

1. Running the app with just Next.js next dev instead of vercel dev (we recommend doing this regardless)
2. Changing the port from the default 3000 to something else (e.g., running next dev -p 1234)
3. Clearing the cache, including service workers
4. Upgrading Node.js to version 18 or later
5. Deleting the .next folder and node_modules and then rebuilding the project
6. Having two instances of Next.js running simultaneously, terminating the extra process resolved the issue

I've had this issue multiple times, usually solution 5 works for me.

Here's some solutions that worked for me on the occasions when solution 5 didn't:

1. Resetting my PC
2. Upgrading Node.js
   In my case, I upgraded from from v20.3.1 to v20.9.0
3. Clearing service workers
   When using next-pwa, the service worker left over from my build server was causing an issue on my dev server. To prevent this issue reoccurring, I now run my dev and build on different ports. For example, my start script, is now next start -p 3001
4. Fixing any infinite loops

[prunusnira]

what about having same issue on production mode too?
should i make a way to force refresh the page?

[jsykesdev]

Same issue here, happening on 3 of my production deployments. No error, just stops responding til I restart it.

[snspinn]

Had a similar issue in "prod" too but turns out it was the way in which I was naming docker compose services. Two of my yaml files had the same service name so one service was overriding the other, silently. The way logging is handled didn't make this obvious. Don't know if this would be the same in swarm..

I know my answer is not NextJS specific but moral of the story is to always double check your deploy configuration.

[samcx]

Hi everyone!

I will be moving this issue to our Discussions because, as mentioned before, it seems a variety of ways can cause this issue to arise.

We still encourage folks to file bugs outside of this thread detailing the exact issue, with a and details for how to consistently reproduce the issue!

Happy 2024!

[jussihirvi]

It seemed to help to run npm run type-check and fix the errors that were found.
I also did rm -rf .next/cache/*, but that probably did not help. The size of the cache was over 500 MB, so maybe it's not a bad idea to empty the cache now and then.

[71walceli]

Does it happen like this for any of you? In my case, Next is stuck since starting it:

$ curl -v container:8000
*   Trying 172.16.1.34:8000...
* Connected to dev.simulacion.s7sa.uae.internal (172.16.1.34) port 8000 (#0)
> GET / HTTP/1.1
> Host: dev.simulacion.s7sa.uae.internal:8000
> User-Agent: curl/7.81.0
> Accept: */*
> 

Whenever server gets stopped or I hit ctrl+c on curl:

* Empty reply from server
* Closing connection 0
curl: (52) Empty reply from server

And it gets stuck like that, from everywhere and for everyone.

Console:

~/Projects/project$ Recreating project_dev_1 ... 
Recreating project_dev_1 ... done
Attaching to project_dev_1
dev_1         | yarn run v1.22.19
dev_1         | $ next dev -p 8000
dev_1         | ready - started server on 0.0.0.0:8000, url: http://localhost:8000

[71walceli]

• Deleted .next and node_modules
• Changed ports
• Switched Node versions

Nothing seems to work!

There is no CPU/RAM or any red flag like that...

[71walceli]

My project was working normally before doing some changes, such as trying to add some v0 compoment, I had trouble setting tailwind, so maybe I broke it along the way.

[71walceli]

Yep! That was the case. Needed to delete all tailwind and v0 files, resetting from git. So messing with the config may cause this, making it unable to work... I really had no idea what I was doing to make it all work, having had issue after issue... Well, glad I managed to restore it to working order... Don't know what to do or say...

[vatsilidis]

I just faced this issue running Next.js 14 on macOS.
All the times I'm starting the Next server, it stays in the state Ready after 4.5sec.
Tried all the previous solutions but nothing changed a bit the situation.