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:

• Fix random thread hanging due to incorrect pthread_cond_wait usage fsevents/fsevents#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: webpack-contrib/webpack-hot-middleware#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

[Stroik]

It's 2023 and I'm still getting this error.

$ node --version
v19.8.1
$ npm --version
8.19.2

// package.json
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0",

OS: Windows 11 x64

I already tried to change the next port in the package.json scripts to 1234 or 8888 or 5000 and so on but nothing changes.
The only way that I found to stop the compiler is restart the dev server.
I reviewed all my code and there isn't syntax errors. I don't know what else to do 🥹

[carrizoja]

Deleting .next folder in the project and then running npm run dev simply worked for me.

@talksik, Thank you!

This worked for me! Thanks!

[Stroik]

Manually disabled prefetch in whole application <Link prefetch={false}> worked for me. For some reason next.js 13.2.4 has the hover prefetch activated by default in dev mod and that bring the compiling issue

[timneutkens]

@Stroik for that case make sure you're using next@canary currently (or 13.3.0 which is going out right now).

[iqqmuT]

One possible reason for freezing is that Next.js is trying to download a font but the server is throttling your requests. It might be that you are hitting a limit of the font provider.

I was using Inter font from Google. The issue was gone when I either

• I removed next/font usage, or
• I switched my internet connection, changing my IP

Could we define timeout via env var or display a better error text if font fetching takes a long time?

[sophlanz]

Fixed it by deleting .next folder and rebuilding it using 'npm run build". I would also recommend deleting node_modules, and reinstall with "npm i"

[danielgangverk]

Upgrading from node 14 to node 16.6.0 solved the problem for me. This only started happening after the new nextjs image component from nextjs 13 was introduced to the project

[mikeconstable]

Deleting and rebuilding .next and node_modules made no difference for me. Disabling my home VPN did enable localhost to load. Suggests external dependency being blocked. I have a fresh 'create-next-app' install, no other dependencies added.
node v18.16
next.js v13.4.1

[ibrahimaq]

I came across the same issue. In my case, when I checked the 'network' in the console I noticed that the throttling was set to 'slow 3G'. I did use throttling some time ago and reverted it to 'no throttling' but for some reason it throttled on this occasion. Hence it seemed it was stuck in the loading state.

[mkarajohn]

#10061 (comment)

For me, the issue was really weird. When I ran lsof -i tcp:3000 there was a node instance running (probably NextJs) but when I ran npm run dev I didn't get an error. NextJs started just fine. I somehow got two NextJs instances running at the same time, so when I tried to reach 127.0.0.1:3000, it just wouldn't load. I killed that process and the issue was fixed.

Same issue, same resolution.

    Operating System:
      Platform: linux
      Arch: x64
      Version: #41~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Fri Mar 31 16:00:14 UTC 2
    Binaries:
      Node: 18.12.1
      npm: 8.19.2
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.1
      eslint-config-next: 13.4.1
      react: 18.2.0
      react-dom: 18.2.0

[dvenomb98]

I cant really upgrade to node v-18 cause some dependecies in my project, but what worked for me is downgrading node to v16.15 from v16.44.

i did exact this:
cd (path-to-my-project)
rm -rf .next
rm -rf node_modules
npm cache clean --force
sudo n 16.15 (or your alternative)
npm install

"next": "12.3.1",
"react": "17.0.2",
"react-dom": "17.0.2",

Mac Air M1 2020, Ventura 13.1

[jjroley]

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.

[pyriceti]

On my side, it was a leak from my postgreSQL database clients pool, so when I would be out of clients from the pool, the app would become unresponsive. This was hard to track, since most of the next app is cached (especially route endpoints from Link components) so only my API requests would never succeed.

[mhmmd-ysf]

Same Issue

Same issue, same resolution.

But in my case there are 3 instances? (2 nodes and 1 from Google)

Is it supposed to be like this?

[nagarro-subham]

Faced same issue but it started working fine as soon as i upgraded the node version 16.8 to latest.

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

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