Skip to content

Cancel Rendering Route Error when Router Push from Hash #36830

@u840903

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Linking and NavigatingRelated to Next.js linking (e.g., <Link>) and navigation.bugIssue was opened via the bug report template.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions