Cancel Rendering Route Error when Router Push hash

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.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.15.0
      npm: 8.5.5
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 12.1.7-canary.26
      react: 18.1.0
      react-dom: 18.1.0

What browser are you using? (if relevant)

Google Chrome Version 102.0.5005.61 (Official Build) (arm64)

How are you deploying your application? (if relevant)

Locally and Vercel

Describe the Bug

Similar to https://github.com/vercel/next.js/issues/36830 (fixed by https://github.com/vercel/next.js/pull/36828)

trying to store more information in hash, getting “Cancel rendering route” error when pushing updated hash to router:

Expected Behavior

Pages changes without error.

To Reproduce

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

1. Go to http://localhost:3000/
2. Click “to world”
3. Error pops!

[domasrc]

Having the same error just by clicking quickly on nav links with hashtag hrefs. Seems that the error is triggered when the hash link is clicked before it fully scrolled up/down to the hash clicked before.

React 18.1 / Next 12.1.6

[bordeo]

I’m using this workaround

router
  .replace( // or push or whatever you want
    {
      pathname: window.location.pathname,
      hash: newHash,
      query: window.location.search,
    },
    null,
    {
      shallow: true,
    }
  )
  .catch((e) => {
    // workaround for https://github.com/vercel/next.js/issues/37362
    if (!e.cancelled) {
      throw e
    }
  })