-
Notifications
You must be signed in to change notification settings - Fork 26.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can not navigate in development (Router hangs after some time) #5598
Comments
I have same issue |
I'm also seeing this in a production environment, so I'm not sure HMR is the sole responsible for the issue |
@ernerock I deployed the above example here but the issue doesn't seem to occur once live. Were you able to reproduce in a production environment? |
@malimccalla It seems my issue is different from yours, however the navigation behavior is the same. When the page I navigate to has a css import
the navigation behaviour is the same as you reported. Seems to be an issue with '@zeit/next-css' Seems to be reported already in #5291 , can be 'solved' temporarily by importing and empty css file in _app.js |
@ernerock Very odd, they may be related in some roundabout way! |
Same issue here, I have pages set up as /home and /home/subpage, then if I try to navigate from /home to /home/subpage with Router.push, or withRouter HOC or even Link it doesn't work. Okay now I have some more info, I tried to rename /home to /home/welcome and the case described above still doesn't work for me |
@maciej-ka Ah yes I can confirm it also happens with @timneutkens Sorry to @ you I know there are loads of other issues but any chance we can get some eyes on this? I've been trying to get to the bottom of it for a week now with no luck and it's really blocking development |
It's most likely related to on-demand-entries and their disposal |
I did a bit of digging and it seems it happens due to the pages being disposed of. As soon as this log appears the disposed pages can no longer be navigated to
I have a bit of time tonight to do a deeper dive and can hopefully get a PR open to fix it. @timneutkens Thanks for the initial insight, let me know if you think theres any part of that file I should be looking at in particular |
I did have a look at trying to fix this but there is a lot going on in the related files and unfortunately I couldn't quite get to the bottom of it. For anyone else having this issue, as a current workaround I'm using this configuration in my onDemandEntries: {
// period (in ms) where the server will keep pages in the buffer
maxInactiveAge: 25 * 1000,
// number of pages that should be kept simultaneously without being disposed
pagesBufferLength: 5,
}, |
I have this issue as well. |
Is someone looking into this? I also have this issue but not necessarily to all the routes. It's random which route/routes become unresponsive but they all do eventually. |
Yup, it sure is. Happens after dispose. |
Same with me. |
Can someone confirm for me that this is not an issue in production? |
In production mode its ok, after I've changed ENV to production everything is going ok |
I have this in both dev and production. Doesn't matter if the page is inactive, etc. I can have a fresh load and it won't work. In dev, the server console If I type mysite.com/contact into the browser, it will load just fine. [was hoping it was just in dev as many were saying] EDIT: I did have an |
Same issue here, route do not complete in dev mode after dispose. It is really annoying. |
@roytsang Instead of saying "same issue" use 👍 on the issue. Your manual |
I have the same issue. It only started today after I started using Head from next/head in my _app to apply a title and favicon. |
@Atmospheres have you tried @malimccalla workaround solution? It wasn't a total fix but worked for me as a workaround. |
@timneutkens okay, sure, I can increase the disposal time, but what about the situation where the server is started for the first time? I won't be able to navigate to those pages programmatically because they are not built yet. 🤔 |
I've now replied about 4 times with the exact same message. Please provide a reproduction.
To answer the specific question, pages are built on-demand, and this system works fine. I assume you have something in your configuration that makes webpack not trigger the file as finished building. However it's hard/impossible to say because there is no reproduction. Also note that the specific issue, as mentioned earlier, was already fixed and that increasing the timeout does not help for the specific issue you're experiencing. Hence why I keep asking for a reproduction 🙏. We're super happy to look into this and spend time on it. |
I created a new project yesterday and it worked just fine. There has to be something specific about my project that makes it not work. I will try to gradually take it apart later today and see at which point the problem disappears. |
I'd love to take a look if you can reliably reproduce it. |
The good news is that I was able to pinpoint the error. The bad news is that the issue with my project was no different to what other people, in this thread, have reported. So if the issue is with CSS and disposal limit, and it supposedly has been solved, I must be doing something wrong. Is this where you put these?
Reproduction: https://github.com/dydokamil/next-js-router-bug |
@dydokamil |
I can get this to reliably reproduce across dev, production and static-export modes and none of the The only way to fix the problem was to remove Any Hitting any of those blog post page routes directly work fine, the bug is only related to client-side -based routing. This happened after upgrading from version 6 to version 8. I hit initially this with |
Could you add a reproduction repository to vercel/next-plugins#282 What you're describing sounds exactly like that issue. |
After adding next/css package I can confirm this happened to me as well. |
The same happened to me in development (production works as expected), and the issue is when we link to pages (or have components inside) that import sass files. My const withSass = require('@zeit/next-sass');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
require('dotenv').config();
module.exports = withBundleAnalyzer(
withSass({
distDir: '../dist',
env: {...},
}),
); So then, one of the components in depth have this import: // MIGRATE: PriceDetail to styled components
import './PriceDetail.scss'; When I comment the import, the link starts working. So it seems to be an issue with |
I have similar issue but not same. Unfortunately I get same error |
- Links on index page were mysteriously not working - Tracked problem to the fact that target page was importing CSS - Solution: move CSS to global import (I think this is required as of 9.3 anyway) - Ref: vercel/next.js#5598 - Note: may cause problems linking to sphinx files (?) which still import CSS, but appears to work fine in docs??? what?? Makes very little sense why this fixes it, and still a bit inconsistent. Luckily the problem seems to be related only to the dev server + HMR (??) Check how the built version works in CI...
- Links on index page were mysteriously not working - Tracked problem to the fact that target page was importing CSS - Solution: move CSS to global import (I think this is required as of 9.3 anyway) - Ref: vercel/next.js#5598 - Note: may cause problems linking to sphinx files (?) which still import CSS, but appears to work fine in docs??? what?? Makes very little sense why this fixes it, and still a bit inconsistent. Luckily the problem seems to be related only to the dev server + HMR (??) Check how the built version works in CI...
I've encountered the same issue with next 9.4 I have something like pages/page2.js which does some stuff then calls Also possibly worth noting is that I do have next-css in my next.config.js - I'm going to try to remove it and see if that has any impact. Looks like maybe there's a hot fix here? =) |
Aha, that fixed things for me - I obviously also had to move my import to a shell |
Before trying the workaround and other stuff, Try this
Fortunately, this worked for me, just try this before trying something else.. |
Just wanted to leave this here because this is the first thing I found while searching for router hangs and slow down problems. I was able to fix my issues by moving the |
Now that I am using Next 11 I am still facing the same issue with next/link. Once I click a link, it did change the URL on the browser but the page did not load unless I clicked a refresh/reload button. I guess I just have to go back to the good old anchor tag. |
i am experiencing the same issue, reproduction:
|
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
Either
Link
orRouter
stops working when doing client side routing. It seems that HMR may be interrupting the transition between pages. It occurs most frequently if the app is left idle or in the background for a bit of time (although I have experienced it happening whilst clicking around without it being idle)To Reproduce
Steps to reproduce the behavior, please provide code snippets or a repository:
npm install
npm run dev
Expected behavior
I expect to be able to visit all the individual pages
Actual behaviour
Page does not navigate to certain routes. Refreshing the page will fix it
Screenshots
Both the "about" and "contact" links do not work (notice the HMR log on the first attempt of each route). After a page refresh they work as expected. If I leave the app idle for roughly 2mins again it will start over with the issue
System information
Additional context
With the console open you can see that the Router event
routeChangeStart
fires butrouteChangeComplete
never does.The text was updated successfully, but these errors were encountered: