Cancel Rendering Route Error when Router Push from Hash

[u840903]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.0
  npm: 8.3.0
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.3
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

Google Chrome Version 101.0.4951.54 (Official Build) (arm64)

How are you deploying your application? (if relevant)

Locally and Vercel

Describe the Bug

We have a hash based modal system. When a modal is opened using...

router.push('#modalname');

...and quickly closed with...

const removeHash = (path) => {
  return path.indexOf("#") > -1 ? path.substring(0, path.indexOf("#")) : path;
};

const { asPath } = router;
const path = removeHash(asPath);
router.push(path);

...the modal is closed, but we get the error Error: Cancel rendering route.

Expected Behavior

The modal closes without the error.

To Reproduce

Source

git clone https://github.com/u840903/hash-cancel-rendering-route
cd hash-cancel-rendering-route
yarn
yarn dev

Vercel

https://hashes-two.vercel.app/

Steps locally

There's various combinations, but the shortest is to:

• From /, click on To blog
• Now in /blog click Back home
• Now in /, click the to world button
• Error pops!

Steps on Vercel

• From /, click on To blog
• Error pops!

Comment from icyJoseph (https://github.com/icyJoseph)

It seems that any navigation to another route, followed by a hash navigation and a navigation away to another route triggers this. I think the key issue, at least on my setup, is the synchronous call to router.push, twice, once as a hash, and then as a route. Odd, that one must first navigate away, and come back to the page.

Though, I'd expect router.push("#hash").then(() => router.push("/route")) to help out, but it doesn't.

The event listener for errors also does nothing. Curious.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.