-
Notifications
You must be signed in to change notification settings - Fork 26.7k
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
Links randomly not working and the Routing system is broken. (Let's Fix it) #27783
Comments
Now I remember that I have downgraded the node to version 12 because the v14 was not compatible with React Native. Might be the source of this problem?! |
Could you please link some related issues? This has never happened to me but I'm curious to learn more (if this issue is as widespread as you say it is). |
Could you please provide a public repo with a reproduction so we can look into this? 🙏🏼 Thank you! |
|
@leerob Thank you for your response, I will make a duplicate repo tomorrow to check if there is something wrong with the codes. |
@leerob I have deployed this to Vercel and after testing the same issue is happening. To reproduce:
I don't know if it's a good idea to send the Vercel link here. I think you can deploy it yourself. Thank you. |
In this video, you can see the issue. RPReplay_Final1628250284.MOV |
👍 |
Hi @Garamani is this happening in a specific environment/network connection or specific devices? I'm not able to reproduce this on desktop or mobile while throttling the network connection using the provided reproduction. Also what was the latest canary you tried? The latest is |
Hi @ijjk, Thanks for checking. Did you deploy the repo I've posted? the background video and CSS animations seem to be the problem. However, even after removing the background video, sometimes I experience this issue. In my opinion, this might be related to prefetching. I don't know what's going on under the hood, but based on the behavior I guess the js codes are not loaded completely. About your question about environment/network connection or specific devices, the Internet connection here in my country because of heavy filterings is not that stable, the devices I'm testing are MacBook pro 2017, iPhone 12 and redmi note 8(exprienced no issue with limited testing). I haven't experienced this kind of behavior on other websites such as Youtube. The Links always lead to something, clicking a Youtube link opens the page but because of poor internet connection doesn't play the video. I think the Next.js Routing system needs some fundamental changes. The links should always open or produce some kind of error. The users expect the standard behavior, otherwise, they think the website has a problem(ruining a Company's Reputation) even though the cause of the error might be related to their poor internet connection. I used the latest canary version, the node version is 12. (you can experience this issue more often on iOS version of Chrome) If you have any suggestions, I will try them and report back. Thank you |
Upgraded to the latest canary version(11.0.2-canary.27). Same Issue. After upgrading some warnings appeared. I added webpack 5, sass, node-sass, and acorn to devDependencies. the following warnings are still there(I think some are false warnings and some not necessary):
|
I'm also facing the same issue here -> https://abstack.pk/apps/poetry when I click on any poetry category, sometimes it loads and most of the time the loading get stuck(when i click on the link and the page isn't fully loaded yet). Both https://abstack.pk/apps/poetry and the next page is statically generated. If I open the link in a new tab the link is opening fine. |
Just noting that I too have seen this behaviour before in a Next app, but can't be more specific as to why/how it occurs I'm afraid. Edit: It was also using the |
@mattboon Thank you. It's good to know the issue is happing in different regions and networks. I added the NProgress later to see if the links are working. |
I am experiencing the same. I am using next I noticed that after directly navigating to subpages, the entire website and links suddenly behave correctly. As if some chunks or code to get the site running properly is all loaded once I hit the subpages manually. I wonder if it has something to do with using |
Anything on this? We are facing the same issue during development |
I am having the same problems too, specially on slow networks. What I did is disable prefetching on some of the links, seems to work (not ideal obviously) |
We are currently facing this same issue. In our case we are not prefetching. |
Our team is also seeing this issue, and we are prefetching our pages. Seems to occur randomly with the Link components as well as with router pushes. When we load /route1, then click a side bar to navigate to /route2 most times it will trigger a routeChangeStart event but it will never trigger a routeChangeComplete event. If a click the same link again we can see the routeChangeError being triggered with route cancelled, even if we waited several minutes before clicking again. Have tried several workarounds but no luck, this was not an issue we were seeing several next.js versions ago either. |
We have this issue too. I found that if I click the link 5 seconds within page load, then the destination JS chunk can never load. But after 5 seconds it works normally 2021-09-02.1.29.36.mov |
we are facing this issue as well, when can this be fixed as it seems to linger no matter which next.js verions you use. Anyone from Next.js / Vercel care to comment? |
This has become a serious blocking issue for our team. We've had to disable prefetching but this is a bandaid and negatively impacts app performance. I understand these issues can be hard to debug, but broken routing seriously impacts our ability to use next.js. |
It is also blocking our team. |
We're giving this top priority folks! We'll keep you posted 🙂 |
This applies the fix from the awesome investigation done in #28797 by @jayphelps and adds a test to ensure this is working as expected. It seems that the `route-loader` has a race condition while prefetching and if a script is executed before we have created a current "future" entry to resolve the entry stays in a pending state causing routes to hang so this handles the condition by ensuring pending/errored entries do not stay around. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have helpful link attached, see `contributing.md` Fixes: #28797 Fixes: #27783
Please try |
Thank you for checking this! |
@Deliaz can you create a new issue with a consistent reproduction showing this still being an issue on the latest canary of Next.js? |
I think we are seeing this issue as well. Trying to upgrade to the canary but seeing errors I'm not sure how to debug when running
|
@dtothefp can you open a separate issue with a minimal reproduction to investigate the source map error? |
@ijjk was able to resolve my issue, was a url path for font-face that no longer worked with I was able to update to The result is a full page refresh and inability to navigate client side. Do you any feedback on when we can expect an official NextJS release because most people at our organization don't feel comfortable running a canary in production? |
Canary 14 seems like a major improvement within our app, we haven’t encountered the issue within our tests since the upgrade. But we can’t release our app without the next official next.js build, as I’m sure is the same for many if not all production or enterprise apps. Is there an ETA of when the next official release is planned for? |
Hey @jonathanmcchesney! Glad to hear it's been resolved for you. We're working hard to prepare for the next stable release. I don't have a firm date but we are aiming for release within the next few weeks. |
@leerob @ijjk let me know if you would like me to open up a different issue but I was finally able to gather some info by adding some very rough debug logging into the file with the fix from This issue only happens to us in some environments. We are uploading static assets to S3 and using NextJS
|
@dtothefp I think a new issue would be good as this sounds like a different case than the original issue and will allow us to investigate the details specific to this new case more closely. A repo with a minimal reproduction would also help speed up investigation. |
This removes the log when we fail to parse the source maps in the `wellknown-errors-plugin` since this log isn't really actionable by users and clutters the error output. x-ref: #27783 (comment)
@ijjk thanks for the help, I think we're good on this. came from using a specific build id generateBuildId: async () => process.env.SOME_VERSION For some CI jobs this build id was not unique per CI build and combined with CDN caching of the build manifest stuff got out of whack with Webpack chunk loading resulting in failed client side navigation. It presented surprisingly like this GH issue so sorry about the confusion. |
@dtothefp I see, thanks for the info! Let us know if you notice any other issues around this. |
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. |
What version of Next.js are you using?
11.0.1
What version of Node.js are you using?
v12.0.0
What browser are you using?
Chrome, Safari, Firefox (mobile and desktop)
What operating system are you using?
macOS
How are you deploying your application?
Vercel
Describe the Bug
Randomly, the links don't work; especially when the link I'm trying to open is more than simple text and images (pages with CSS animations and video).
What I have done so far to fix the issue:
Now, the front page has no video background with only a few texts and small images but the issue is still happening.
This is not some minor issue to get neglected. This is a serious issue that makes the website unusable.
There are so many similar issues and discussion topics opened by developers and the responses from the maintainers show that they have Underestimated the seriousness of this issue. Working Links are a vital part of each website. Don't forget that the reason that so many developers are using Next.js is to bring a better user experience at the end.
Some times ago I checked a website from a developer promoted by a tweet and the Links were not working. I told myself that maybe It's still under development and left the website. I didn't know that a refresh might help. this is a nightmare for any startup owner to lose their potential customers without even knowing that the website doesn't work properly.
SO, TAKE THIS ISSUE VERY SERIOUSLY, THE LINKS WERE WORKING SINCE THE INVENTION OF THE INTERNET
To show the amount of seriousness this is a screenshot showing the Vercel website itself has some issues opening links.
However, there might be something wrong on my side. Let's fix the issue if you have any suggestions.
Expected Behavior
The Links should work as fast as possible with no unusual delay.
To Reproduce
I developed my website by following the next js tutorials and then I added some CSS animation, background videos, and state handling by useEffect, useState, useRef.
The text was updated successfully, but these errors were encountered: