mjm commented 4 years ago

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.

Run now dev
Work on the app, making changes to files, saving, and watching them hot reload in the browser
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 commented 4 years ago

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

jeantil commented 4 years ago

Hi,

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

MatteoGioioso commented 4 years ago

Same issue here

tetigi commented 4 years ago

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 commented 4 years ago

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

cronokirby commented 4 years ago

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

timneutkens commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

eandre commented 4 years ago

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

HunderlineK commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

opolo commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Ah, thanks, will do!

acha5066 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

+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 commented 4 years ago

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 commented 4 years ago

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.

timneutkens commented 4 years ago

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.

Can you check if you have a leftover serviceworker or reverse proxy in front of the application?

Temetias commented 4 years ago

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.

Can you check if you have a leftover serviceworker or reverse proxy in front of the application?

Hm, actually after a full reboot it started working for me suddenly... The only thing i noticed being different is the output on the console. In the "stuck" scenario I only got:

ready - started server on http://localhost:3000
event - compiled successfully

But now when it's working it's also building the index page when the request comes in (as expected). It didn't get to that point previously tho.

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully

Before it started working again I did check and there was no leftover serviceworkes at least. I did also try with a fresh install of chrome and that wasn't successful either.

I know that it's not much to go by and I wish I could provide more help with this.

yuriduartedev commented 4 years ago

Hello, I have the same problem, in my case it happens when I do some import of styles within a page or component and almost every time I try to change these styles the browser keeps loading endlessly ...

Sometimes the problem occurs when I update some part of the code that has an import from another part of the code.

For me it worked by clearing the service work cache in the browser.

Details:

Browser - Google Chrome Version 85.0.4183.121 - 64 bits
OS -macOS Catalina version 10.15.6
Next.js v9.5.3
React v16.13.1
React DOM v16.13.1

I hope that this information helps in the investigations, I investigated a little here as well but I still haven't been able to dedicate myself to it, if I have any solution for the case I say here.

s4l1h commented 4 years ago

I had the same problem too. I have fixed this problem by remove service worker. When you change the development server port if the problem gets solved. The problem occurs because of the old service worker.

For Chrome. Open this page: chrome://serviceworker-internals and find localhost service workers and click to unregister button.

If you want to unregister all service worker open the developer tools and run this code on above page.

document.querySelectorAll("button.unregister").forEach(item=>{ item.click()})

kylekirkby commented 4 years ago

For some reason, removing jshint with yarn remove jshint fixed my problem. I did just add it, so logically worked backwards regarding what had changed.

orajiaku commented 3 years ago

Hey guys, is there a fix for this? I am using "apollo-server-micro": "2.19.0" for my apollo server. It hangs after one successful connection.

sheikalthaf commented 3 years ago

I also faced the same issue. By unregistering the service worker from devtools for localhost:3000 solved the issue. You can also try the same by going to devtools -> Application -> service worker and then unregister if anything shown for localhost:3000.

This issue is solved for me by doing above process.

SilverClash commented 3 years ago

Running into the same issue here, today it just stopped working. When I try to build a project it's compiling successfully and the just get stuck on "Collecting page data". Dev server itself working, the initial page where I have only static data is working perfectly, but all other pages where GraphQL call used not working, can't receive any data.

Same project working just fine on another PC with all the same data sources, same network, same code. I tried to delete all packages, clean cache, install Next 10.0.5 or 10.0.4 - no luck, it's completely stuck. Changing port with -p xxxx is not working for me

nuflowx commented 3 years ago

Ran into the same issue a few days ago. Tried unregistering service-worker like others have mentioned, nothing. Clean, reinstall different packages, etc.

Changing port works fine, so for now I'm just doing that, would be good to figure out the source of the issue eventually... Or some fix. Workaround running on different port good enough for now though (I'm on Nuxt, not Next, but seems to be same/related issue)

jg-germain commented 3 years ago

For me it was the service worker that was completely messing with my browser creating huge memory leaks in the hundreds of MB, preventing the page to reload, preventing routes to work properly and other negative effects. I resolved all those issues when I stopped and unregistered the service worker in the chrome dev tools.

nuflowx commented 3 years ago

After trying my previous steps (un-registering service worker, reinstall, etc) what finally fixed the issue was a computer restart. So can't pinpoint which of the things exactly resolved it, my guess would be service-worker solution as most people have mentioned that, but tied to a computer restart for me ;)

elvisduru commented 3 years ago

It appears the port 3000 is already in use. You can solve the problem by doing the following: On Windows:

netstat -ano | findstr :3000
taskkill typeyourPIDhere

On Linux/Mac:

lsof -i tcp:3000
kill -9 PID

Bestulo commented 3 years ago

Problem persists lol. I have to restart my app after a little while of development. Using Next v10.

Bestulo commented 3 years ago

Problem is solved for me. I updated NPM from 6.14.11 to 7.6.0, and the dev server instantly stopped getting stuck every 5-15 minutes and it has been live and fast refreshing on changes for over 4 days without being restarted once. Sailing smooth now. It also renders changes much faster than before.

lorstenoplo commented 3 years ago

I am facing the same issue but only since 2days, you find the repo here : https://github.com/lorstenoplo/eccom-api

Same issue here, I have tried the following :

Starting with a different port
next dev doesn't work for me
There were no service workers on localhost itself, so I cannot clear them

digz6666 commented 3 years ago

Same issue on nextjs 10.0.6

njustice4all commented 3 years ago

I think this problem is due to the chrome extension so check your browser i'm using chrome 89.0.4389.114 uninstall chrome extension all (do not disable, remove)

amedina068 commented 3 years ago

I had the same issue for the last couple of months. Yesterday I finally had it and removed all node_modules, and package-lock, updated my npm to 7.x, stopped the service worker for localhost:3000, and started using npx next dev instead of npm run dev. And it seems the issue was solved.

It seems that what made it work was stopping the service worker and then restarting the npx next dev command.

I don't know if it has anything to do with it but the first Next app I worked on was the PWA example and I worked on it for several weeks before disabling the PWA for development.

meotimdihia commented 3 years ago

I doubt this relates to production too. My website gets stuck on iPhone, and it works again if I open a new tab in private mode.

angelnext commented 3 years ago

Weird, when i do npm run dev, it starts normally but when i open localhost:3000 it just keeps loading, it doesn't give me any errors but i cannot access the web page

vercel / next.js

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

Bug report

Describe the bug

To Reproduce

Expected behavior

System information

Additional context

To Reproduce

System information

Solution