Can not navigate in development (Router hangs after some time)

[malimccalla]

Bug report

Describe the bug

Either Link or Router 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:

1. Clone this repo (https://github.com/malimccalla/next-routing-issue)
2. Install dependencies npm install
3. Run the server npm run dev
4. Visit all pages by clicking the links
5. Go make a coffee (leave page idle for ~2mins)
6. Attempt to visit all pages by clicking the links
7. Certain links do not navigate to their respective page 😔

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

• mac Mojave 10.14
• Chrome
• next.js v7.0.2

Additional context

With the console open you can see that the Router event routeChangeStart fires but routeChangeComplete never does.

[dankythuat]

I have same issue

[edelfrade]

I'm also seeing this in a production environment, so I'm not sure HMR is the sole responsible for the issue

[malimccalla]

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

[edelfrade]

@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

import 'react-alice-carousel/lib/alice-carousel.css';

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

[malimccalla]

@ernerock Very odd, they may be related in some roundabout way!

[matejkonrad]

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

[malimccalla]

@maciej-ka Ah yes I can confirm it also happens with push it's not just Link. Will change the title, as its a bit misleading.

@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

[timneutkens]

It's most likely related to on-demand-entries and their disposal

[malimccalla]

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

> Disposing inactive page(s): /

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

[malimccalla]

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 next.config.js to extend the duration before pages get disposed.

  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,
  },

[hiovi]

I have this issue as well.

[serendipity1004]

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.

[tomsseisums]

I can't look into it right now as I'm focusing on the next-server/lambdas issue, but it's most likely related to on-demand-entries.

Yup, it sure is. Happens after dispose.

[alexsenichev]

Same with me.

[serendipity1004]

Can someone confirm for me that this is not an issue in production?

[alexsenichev]

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

[dmayo2]

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
> Building page: /contact
WAIT Compling...
success client complied in 462ms
but the page never renders in the client. At the same time, on the client console:
[HMR] bundle rebuilding message, then the server console gives:
Disposing of inactive page(s): /, /contact

If I type mysite.com/contact into the browser, it will load just fine.
I've tried the work around in next.config.js of maxInactiveAge and pagesBufferLength to no avail.

[was hoping it was just in dev as many were saying]

EDIT: I did have an import 'node-mod/dist/theme.css in a component. I moved that import to _app.js and that Link is working.

[roytsang]

Same issue here, route do not complete in dev mode after dispose. It is really annoying.

[timneutkens]

@roytsang Instead of saying "same issue" use 👍 on the issue. Your manual +1 doesn't end up being taken into account when sorting on 👍

[Atmospheres]

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.

[scrumptiousdev]

@Atmospheres have you tried @malimccalla workaround solution? It wasn't a total fix but worked for me as a workaround.

[tropical32]

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

[timneutkens]

I've now replied about 4 times with the exact same message. Please provide a reproduction.

Note that this comment is not going to solve your issue. As said many times before:

please always provide a full reproduction. It's impossible to look into "happens for me"

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.

[tropical32]

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.

[timneutkens]

I'd love to take a look if you can reliably reproduce it.

[tropical32]

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?

module.exports = withCSS({ onDemandEntries: { maxInactiveAge: 1000 * 60 * 60 } })

Reproduction: https://github.com/dydokamil/next-js-router-bug

[flytaly]

@dydokamil
It is known bug: vercel/next-plugins#282
You can "solve" it importing an empty CSS file.

[BlakePetersen]

I can get this to reliably reproduce across dev, production and static-export modes and none of the onDemandEntries or empty css file workarounds helped.

The only way to fix the problem was to remove import 'highlight.js/styles/color-brewer.css'; from the Body component on my blog post pages.

Any <Link> instance that pointed to a blog post page would fail to load but http://localhost:3000/_next/static/development/pages/post.js still would get dropped on the page on <Link> click. Comment out that css import, <Link>s to blog posts work perf. Uncomment and all <Link>s fail to load blog posts.

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 @zeit/next-css but I can replicate this issue in the same way after swapping in @zeit/next-sass and importing a .scss file. For now I'm just gunna load these styles using styled-components drop @zeit/next-css. After reviewing https://www.npmjs.com/package/@zeit/next-css and https://www.npmjs.com/package/@zeit/next-sass, it seems like those Usage examples would break 🤔

[timneutkens]

Could you add a reproduction repository to vercel/next-plugins#282

What you're describing sounds exactly like that issue.

[kevinvugts]

I can get this to reliably reproduce across dev, production and static-export modes and none of the onDemandEntries or empty css file workarounds helped.

The only way to fix the problem was to remove import 'highlight.js/styles/color-brewer.css'; from the Body component on my blog post pages.

Any <Link> instance that pointed to a blog post page would fail to load but http://localhost:3000/_next/static/development/pages/post.js still would get dropped on the page on <Link> click. Comment out that css import, <Link>s to blog posts work perf. Uncomment and all <Link>s fail to load blog posts.

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 @zeit/next-css but I can replicate this issue in the same way after swapping in @zeit/next-sass and importing a .scss file. For now I'm just gunna load these styles using styled-components drop @zeit/next-css. After reviewing https://www.npmjs.com/package/@zeit/next-css and https://www.npmjs.com/package/@zeit/next-sass, it seems like those Usage examples would break 🤔

After adding next/css package I can confirm this happened to me as well.

[acabreragnz]

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 next.config.js file:

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 withSass plugin.

[kodcuserkan]

I have similar issue but not same. Unfortunately I get same error
in production too. But for some reasons links work sometimes.

[elsigh]

I've encountered the same issue with next 9.4
I added CodeMirror yesterday to my project and also
import "codemirror/lib/codemirror.css"

I have something like pages/page2.js which does some stuff then calls router.replace("/") at the end of that and it just suddenly stopped doing anything.
Running router.replace("/") in the debugger showed a promise that never resolves or hits catch or finally blocks.

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? =)

[elsigh]

Aha, that fixed things for me - I obviously also had to move my import to a shell _app.js file too.

[ashfaqnisar]

Before trying the workaround and other stuff, Try this

• Delete the whole project including the project files, node_modules and next.
• Clone the project repo again.
• Install the dependencies, try running the application again.

Fortunately, this worked for me, just try this before trying something else..

[jpbberry]

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 Router.events.on('routeChangeStart' and Router.events.on('routeChangeComplete' to the componentDidMount() method. In a function component, there are no slow-down issues with using it inside the render. However, in a class component, using these events in the render() will slow down the loading times, being the more you move around links, the more it slows down. Affecting both development and production.

[nathansom]

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.

[wibed]

i am experiencing the same issue, reproduction:

npx create-next-app --ts test
mkdir test/pages/test
touch test/pages/test/index.tsx (some basic page here)
npm run dev
* try to open localhost:3000/test

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