Links randomly not working and the Routing system is broken. (Let's Fix it)

[Garamani]

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:

• Separating all CSS files for each page (A single CSS file caused the javascript to stop working)
• Adding an empty CSS file to _app.js (as some suggested)
• Removing auto-playing background video from home page. (the situation got better but still, sometimes the Links don't work)
• Minimizing buffer in next js config file (as some suggested)
• Adding 'a' tag to all next Links
• Tried to open links by importing next.js router and onClick handler
• Upgrading the next js from ver 10.x to the latest version stable and canary
• Removing repository from GitHub and creating a new next js project with the latest dependencies(as some suggested)
• Fixing all the deployment warnings
• Adding a progress bar to show the page is loading after click (when the links don't work the progress bar goes to end but nothing happens)

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.

• A website with CSS animations or background Videos
• This issue might happen more often by having a slow Internet connection (100kB/s - 200KB/s).
• Open the website in Chrome incognito or Safari Private page on mobile phones. (The first-time users, experience this issue more often)

[Garamani]

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

[dayvista]

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).

[leerob]

Could you please provide a public repo with a reproduction so we can look into this? 🙏🏼 Thank you!

[Garamani]

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).

#5598
vercel/next-plugins#282
#5772
#26356
#27025

[Garamani]

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.

[Garamani]

@leerob
This is the duplicate repo (only the content replaced): https://github.com/Garamani/next4test

I have deployed this to Vercel and after testing the same issue is happening.

To reproduce:

• Open website in Chrome (Tested on iOS 14.6, iPhone 12)
• Immediately open the menu from the top right and click on links.

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.

[Garamani]

In this video, you can see the issue.

RPReplay_Final1628250284.MOV

[mina4gerges]

👍

[ijjk]

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 v11.0.2-canary.27

[Garamani]

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

[Garamani]

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):

npm WARN eslint-config-next@11.0.1 requires a peer of next@>=10.2.0 but none is installed. You must install peer dependencies yourself. npm WARN eslint-config-next@11.0.1 requires a peer of typescript@>=3.3.1 but none is installed. You must install peer dependencies yourself. npm WARN next@11.0.2-canary.27 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself. npm WARN nextjs-progressbar@0.0.11 requires a peer of next@^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 but none is installed. You must install peer dependencies yourself. npm WARN tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

[dev-ABsid]

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.
I am using: "next": Version 11.0.1.

[mattboon]

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 nprogress plugin same as your example above

[Garamani]

@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.

[Brenndoerfer]

I am experiencing the same.

I am using next 11.0.1 and it's deployed via Netlify. Even with only minor visual/ content changes after some deployments links don't work.

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 dynamic imports?

[Deliaz]

Having the same issue with "next": "^11.1.0".
I have quite a simple code that pushes next page via router:

const href = `/${num}`;
router.push(href);

However, after some amount of navigations next hangs:

With 100% CPU usage:

[sidwebworks]

Anything on this? We are facing the same issue during development

[seastian]

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)

[alejandrojsn]

We are currently facing this same issue. In our case we are not prefetching.

[jonathanmcchesney]

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.

[hinsxd]

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

[akshaysura]

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?

[doggodoge]

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.

[CaptainRemo]

It is also blocking our team.

[rauchg]

We're giving this top priority folks! We'll keep you posted 🙂

[timneutkens]

Please try npm install next@canary in your application. This has been fixed in: https://github.com/vercel/next.js/releases/tag/v11.1.3-canary.14

[Deliaz]

Thank you for checking this!
However, I just installed & tested 11.1.3-canary.14 and the problem still exists in my project.
It is worth mentioning that I do not use links prefetch.

[ijjk]

@Deliaz can you create a new issue with a consistent reproduction showing this still being an issue on the latest canary of Next.js?

[dtothefp]

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 next build on Webpack 5

info  - Using external babel configuration from /babel.config.js
Failed to parse source map: TypeError: Cannot read property 'sections' of null
    at _factory (/node_modules/@next/react-dev-overlay/node_modules/source-map/lib/source-map-consumer.js:1008:30)
    at new SourceMapConsumer (/node_modules/@next/react-dev-overlay/node_modules/source-map/lib/source-map-consumer.js:26:12)
    at /node_modules/@next/react-dev-overlay/lib/middleware.js:106:46
    at step (/node_modules/@next/react-dev-overlay/lib/middleware.js:33:23)
    at Object.next (/node_modules/@next/react-dev-overlay/lib/middleware.js:14:53)
    at /node_modules/@next/react-dev-overlay/lib/middleware.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (/node_modules/@next/react-dev-overlay/lib/middleware.js:4:12)
    at findOriginalSourcePositionAndContent (/node_modules/@next/react-dev-overlay/lib/middleware.js:102:12)

[ijjk]

@dtothefp can you open a separate issue with a minimal reproduction to investigate the source map error?

[dtothefp]

@ijjk was able to resolve my issue, was a url path for font-face that no longer worked with mini-css-extract plugin.

I was able to update to 11.1.3-canary.15 and we are still intermittently seeing this issue upon router.push it seems there is some sort of timeout, a request is never made back to origin to /_next/data/<hash>/<page_name>.json

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?

[jonathanmcchesney]

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?

[leerob]

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.

[dtothefp]

@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

https://github.com/vercel/next.js/pull/28899/files#diff-a2b73fb1fea08f451ade0878c0bbfbd3e194992efdfcab41ea805e4287f6a73a

This issue only happens to us in some environments. We are uploading static assets to S3 and using NextJS assetPrefix to load them. What I see is upon client navigation an error in the value inside the promise.then callback block in the generator resolver that was updated in the PR fix for this issue

error: TypeError: Cannot read properties of undefined (reading 'call') at __webpack_require__ (https://<cdn_path>/_next/static/chunks/webpack-4e020f238f989630475d.js:25:43)

[ijjk]

@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.

[dtothefp]

@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.

[ijjk]

@dtothefp I see, thanks for the info! Let us know if you notice any other issues around this.

[balazsorban44]

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.