[v7] Sometimes Links stop working.

[trusktr]

I don't have much info. I updated to v7, and every once in a while <Link>s in the entire app stop being clickable, and nothing happens when clicking them.

I'm not doing anything special, just <Link href="..."> and the only child elements in my Links are plain <a> tags with no attributes, except for className when I want to style them.

F.e.:

<Link href="/products">
	<a className={classnames(classes.logo, 'nextLink')}>
		Products
	</a>
</Link>

Somethings up. But not sure how to reproduce.

[trusktr]

Not sure, but it seems to happen at some point after a hot reload.

[ahmadalfy]

I noticed the same thing after updating to 7 but it happens in development mode only. I am not sure if it is related to HMR or not. My observation is that the server stop compiling the page and the link hangs.

Thankfully refresh fixes the issue.

[srdjan]

I can attest to that too... dev only, super random, page reload fixes it

[pompep]

+1

[timneutkens]

Things missing:

• Issue template
• Clear and concise reproduction

We have a whole test suite that is literally clicking around every feature in chrome while in development mode:

https://github.com/zeit/next.js/blob/canary/test/integration/basic/test/client-navigation.js

[gaogao1030]

reopen issue

I can attest to that too... dev only, super random, page reload fixes it

me too, reopen issue?

[swolidity]

seeing this too @timneutkens should I open a new issue with correct Issue Template and not quite sure how to provide reproduction instructions because the Links seem to just stop working after either a certain amount of time, or maybe after clicking around a bit?

[NgRuiYong]

I am having the same issue as well. The issue seems to appear after the user is inactive on the webpage after a while.

[malimccalla]

Same issue here. It's hard to consistently reproduce as it only seems to happen after a certain amount of time and pretty randomly. The issue goes away if you reload the page.

Not sure if this will help anyone debugging but if you grab next/router it seems that when the issue occurs a route change has started it just never completes

Router.events.on('routeChangeStart', url => {
  console.log('Navigating to:', url);
});

Router.events.on('routeChangeComplete', url => {
  console.log('Completed navigation to: ', url);
});

@timneutkens Could you reopen this please 🙂

[timneutkens]

I'm going to quote myself:

"
Things missing:

• Issue template
• Clear and concise reproduction

We have a whole test suite that is literally clicking around every feature in chrome while in development mode:

https://github.com/zeit/next.js/blob/canary/test/integration/basic/test/client-navigation.js
"

I'm not going to reopen this issue based on what I posted earlier. I'd be happy to take a look if there is a clear and concise reproduction.

[ahmadalfy]

@timneutkens I completely understand why we need a reproduction scenario but I do believe none of us can do that as the issue is happening randomly without any clear steps to do. When the HMR drops in and does it work suddenly links stop working and I refresh and bingo; it's resolved. Happen on a daily basis like 10 times during development and what I use is the same format I was using in the previous version.

I know it is hard to debug without a proper reproduction scenario maybe some of us need to spend more time investigating and coming up with it.

[swolidity]

I am using next-routes and material-ui which I think could potentially be a source of the problem.

[malimccalla]

@timneutkens Thanks, I was able to reproduce with reproduction steps. Have opened a new issue here #5598

[ahmadalfy]

@iamandyk I am not using material-ui and I still see the problem

[MarcosRZ]

@iamandyk @ahmadalfy No next-routes, and no material-ui over here but I have the same problem.

Everything works perfect for a few minutes, and then, random links stop working on client side with no errors.

[Vladk2]

Same here, it's really annoying sometimes..

[g089h515r806]

same issue

[jeremylynch]

+1

[gzoreslav]

+1

[timneutkens]

Instead of posting +1 on an issue that had no reproduction, making it essentially impossible to help you. You could also use GitHub's 👍 feature.

Assuming you're having the same issue as @malimccalla you can track #5598

[chalupagrande]

So I have a similar issue, but I think I found a strange solution that might illuminate the problem. Hope this helps, if not let me know. First let me give @timneutkens what he asked for:

Bug report

Describe the bug

(using: "@zeit/next-sass": "^1.0.1" & "next": "^7.0.2",)
Link will not work once I refresh on a page that is not the index.js.
More specifically, Link stops working when I am trying to navigate to a page where styles have been imported, but due to a page refresh, are not imported on the page that I am currently on.

To Reproduce

I'm putting together a new portfolio, and ran into the issue. Created a specific branch just to replicate it here.

If index.js has styles imported into it, and I client-side navigate away to a different page (about.js), that does not have the styles imported, and then refresh. The styles will go away, and the Link element will not work.

Expected behavior

Clicking the link would navigate me to the route described in the href, regardless of whether the styles are imported on that page or not.

Workaround

You will notice in /src/pages/_app.js line #6 is commented out. Uncommenting this line will fix the issue. This will include styles that affect the header.js that is responsible for the navigation

PS: new to next.js.

[samundra]

I am also having this issue. Looks like the Links are intercepting the click but do not take to the desired page.

Links are created as

<ul>
{this.state.couponTypes.map(({id, path, label}) => (
  <li key={id}>
    <Link as={`/coupon/${label.toLowerCase()}`} href={`/coupon?type=${label.toLowerCase()}`}>
      <a>{label}</a>
    </Link>
  </li>
))}
</ul>

Then I tested the click intercept with

import Router from 'next/router'
...
...
Router.events.on('routeChangeStart', url => {
  console.log('Navigating to:', url);
});

Router.events.on('routeChangeComplete', url => {
  console.log('Completed navigation to: ', url);
});

When I click on my Link I can see Navigating to: /coupon/accounts but it never completes.

[timneutkens]

Try next@canary

[samundra]

@timneutkens The problem is, this happens at random times. Anyway, I will give it a try and let you know asap. Thanks.

[timneutkens]

@samundra however #5598 actually had a reproduction that reliably reproduced this issue and I fixed it shortly after.

[Thuan2000]

I am still having issues with this.

[fandy]

I'm also having issues with this. It happens randomly but is fixed after a hard refresh.

[timneutkens]

Please create a new issue with a clear and concise reproduction. Thanks 🙏

[bmtdh]

Happens all the time, after a period of inactivity (10 mins) or multiple hot reloads stops working in development mode.

[Timer]

Hi everyone, if you're still experiencing this issue on v8 please file a new issue. It is not feasible for us to track issue in old threads with outdated context.

Thank you for your cooperation.