What does the error "Cancel rendering route" mean?

[u840903]

What does the error Error: cancel rendering route mean? I interpret it as a route is being rendered and before it is completed a new route render is started. Is that correct?

I currently get it, after upgrading to React 18, in our end-to-end tests where a modal (rendered in a portal) is opened and immediately closed using a close button. Click on the modal close button triggers router.push and thats where I get the error.

[icyJoseph]

If you do something like:

// _app.tsx
import Router from 'next/router';

Router.events.on("routeChangeError", (err, url, { shallow }) => {
    console.log("Navigating to: " + "url: " + url, {cancelled: err.cancelled} )
});

My guess would be that when router.push happens, the app tries to navigate to that route, however, the new rendering makes it so that other events can be queued, and the E2E test proceeds to click away to next step, which then cancels the current rendering, in favour of a more important UI update.

I've managed to replicate this, by creating a slow page with getServerSideProps that takes a few seconds to return, and while that comes back, I navigate elsewhere. However this doesn't surface as an error on my console.

In your case it must be that the E2E test clicks so fast that it interrupts the current rendering by moving on to the next step of the test. What do you think? It'd be nice if you could boil it down to a reproduction repository.

[u840903]

This does not result in a log in the console. I only see the uncaught error.

Router.events.on("routeChangeError", (err, url, { shallow }) => {
    console.log("Navigating to: " + "url: " + url, {cancelled: err.cancelled} )
});

I'll try and create a create a small demo that recreates the error. Thanks for you time. I'll be back...

[icyJoseph]

This error surfaced for most after upgrading to React 18 iirc. Which version are you running?

[AlexandraKlein]

I'm getting this error with the following code:

       router.push(
            {
                pathname: '/',
                hash: 'hash',
            },
            undefined,
            { shallow: true }
        );

The hash bit seems to be the offender. Removing it removes the error.

If I switch from hash to query params, there is no error:

      router.push(
            {
                pathname: '/',
                query: { section: "section" },
            },
            undefined,
            { shallow: true }
        );

There is an open issue here: #37362

[MAfzalKhan1997]

any solution to this error yet ?

[amaurymagalhaes]

any solution to this error yet ?

Yes, I'm using this solution for this error.

[MAfzalKhan1997]

@amaurymagalhaes unable to solve this issue... It comes after I upgraded react to 18 either with next version 12 or 13 error is appearing... there is no hash routing in my app and it is only happening for dynamic routes.

[MAfzalKhan1997]

any solution to this error yet ? unable to resolve this issue... It came after I upgraded react to 18 either with next version 12 or 13 error is appearing... there is no hash routing in my app and it is only happening for dynamic routes.

[icyJoseph]

When do you usually observe this error? With React 18 transitions might be batching the same work twice.

Do you have any router.push calls? Could you try to await them? Router commands push, replace, are asynchronous, so if these are started, and for some reason, you batch a call again, you'd trigger cancellations.

"For some reason", meaning React 18's concurrent features. That perhaps you don't use directly yourself.

Could you describe more of your issue?

[Hilver]

To all whose ran into this problem after the update to React 18, check first if you are using strict mode in development mode and if so turn it off.

If turning off strict mode solved your error it's probably related to changes in React 18 - https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode - which intentionally leads to race condition.

I recommend to taking a look at this thread: facebook/react#24502

[MAfzalKhan1997]

@Hilver I've tried after turning off the strict mode but still same 😞

[MAfzalKhan1997]

I'm amazed that this issue is still open and have no solution yet. Where's the NEXT team ?

[icyJoseph]

What do you mean? This error is in a sense by design. Let me explain.

Because the pages next/router is async in nature, it is possible for various commands to arrive to it synchronously, or even as the the router starts to execute them.

When this happens, ongoing work is cancelled, and an error is throw to notify consumers.

The appDir router, uses React concurrency, so there's no events, and in a sense, it has designed away the ability/need to report that a route change has been discarded. There's no events at all, at least for now.

While working with pages directory, you could, and probably should, use an event handler for the routeChangeError event. It comes with a flag that tells us if the error is merely a route cancellation, or if something else is breaking.

There has been a couple of bugs fixed with regards to unhandled, uncaught cancellations, but in general, these come from edge cases, such as # navigation.

I'll write a follow up on your initial comment.

[weeksie]

My bad.

// edit:
If you're using an onClick handler and don't preventDefault() on the passed event, the browser tries to navigate to two places simultaneously. That's what was happening in my case.

[gabriel-arghire-tapptitude]

This solution solved the issue: #37362 (comment)
I'm also writing it below.

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
    }
  })

[sujanbasnet1]

Unfortunately this does not work for router.back or router.forward. These methods return void instead of a promise.