`Error: Route did not complete loading` causes page reload

[MistaPidaus]

Link to the code that reproduces this issue

https://github.com/MistaPidaus/nextjs-routing-issue

To Reproduce

1. Build the app locally and run production locally
2. Open the Chrome Dev tool and set the network profile to "Slowest 3G" with 250kb for both download & upload value and 5000 for latency value
3. On the performance tab, set the CPU performance to 6x slowdown and make sure the network is the new profile with above setting.
4. Open http://localhost:3000
5. Once you see the header section with Index page text, spam click it multiple times (it's a button with routing mechanism)
6. Observe the browser console and you'll see Error: Route did not complete loading error.

Current vs. Expected behavior

Current behaviour, as the video attached

https://github.com/vercel/next.js/assets/21690115/ac1fb39a-0317-41a0-81df-4d75ab541c06

Notice when I filled the form and got redirected afterwards due to the logic I've implemented that should run once on the initial visit.

I'm expecting it won't reload or redirect - in other words, the user should be able to proceed with the flow with no issue.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 20.6.0: Tue Oct 12 18:33:42 PDT 2021; root:xnu-7195.141.8~1/RELEASE_X86_64
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.6.6
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Routing (next/router, next/navigation, next/link)

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

We're migrating our web app to the Next.js framework and slowly redirecting traffic to the new Next.js app. After a few days, we noticed a lot of errors (around 1.7k) in our monitoring service, indicating the Error: Route did not complete loading issues/errors.

We suspect the user is having a slow network connection and we managed to reproduce the error. The worst thing is the issue causing the page to reload (refer the video attached) so if the user has to fill in their details, they have to restart again. We have a multiple-step form within our flow. So if the user manages to get far and fill most of the form and hit this error, they have to redo it again. We saw a lot of traffic drop-off after getting this error.

[MistaPidaus]

Bump. No one looking into this?

[Anuj1p]

Getting the same issue. Is there any solution of it ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[timneutkens]

This is an intentional error, not a bug, in Pages Router only, specifically it's there to prevent "hanging" of navigations, for example when JS/CSS/etc fails to load / loads too slow for a client-side navigation. Relevant code here: https://github.com/vercel/next.js/blob/7d4907be156db4240af13bd3c6e9f8ade7910232/packages/next/src/client/route-loader.ts#L13 We could increase the timeout though, currently it's 3.8s.

[MistaPidaus]

Hmm. I feel like it won't totally solve the issue. How much will the increase be? Is there anything to look out for to improve this further?

[karlos-doe]

I got same issue. NextJS version: 14.2.4.

If networking is very slow I got infinite reload of webpage...

[Kolahzary]

We have the same problem if we select "slow 4g network" on chrome's inspect element tool.

Apparently, this issue has happened in 2021 and was fixed in the following PR:

• https://github.com/vercel/next.js/pull/22775