Page router - Rapid shallow routing breaks router events - routeChangeComplete does not fire

[samcarton]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.7-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5

Which area(s) of Next.js are affected? (leave empty if unsure)

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

Link to the code that reproduces this issue or a replay of the bug

https://github.com/samcarton/nextjs-shallow-router-stuck

To Reproduce

• Repro deployed here https://nextjs-shallow-router-stuck.vercel.app/
• Click on any single shallow route button
  • See the counter increment, see the console log the routeChangeComplete event
• Click on a "double shallow" route button
  • See that the counter does not increment and no event is logged in console
• Click on any single shallow route button
  • This is now broken too
• Click on any non-shallow route button
  • On the non-dynamic route, this will fix the routing problem. Clicking the single shallow route buttons will work again.
  • On the dynamic route, this will still be broken.

Describe the Bug

If you happen to perform a shallow routing operation while another shallow route operation is still in progress, any further shallow routes fail to trigger the routeChangeComplete event. This can sometimes be reset by a non-shallow routing operation, though it seems to behave differently based on whether the page is on a dynamic route or not.

Expected Behavior

Rapid consecutive shallow routes should not cause the routeChangeComplete event to stop firing entirely. This seemed to work in NextJS 12.X.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[Daniel-Parton]

I'm also getting this issue

[samcarton]

Still having this issue on latest canary.

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8-canary.7
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

[Marcosld]

We are also having this issue. In our case we solved it by awaiting the previous navigation. We have a singleton promise and we add new navigations to it. Something like:

let navigationPromise = Promise.resolve();

const navigate = (newUrl) => {
  navigationPromise = navigationPromise.then(() => {
    // Perform navigation here with next/router
  });
}

On the other hand, I think the new app router doesn't return a promise when navigating :( I would like to know if this happens also :(

[Enngage]

Same here. Happens when quickly switching routes with soft navigation & dynamic routes.