next.js: Error: Invariant: attempted to hard navigate to the same URL on iPhone

This has been an issue for six months now https://github.com/vercel/next.js/issues/38171. The other ticket has a reproducible environment. Let’s please prioritize getting this fixed

I used a workaround this. Instead of adding a 404 page, I added a page named […myErrorPage] and treated this as my 404 page. All the routes which aren’t matched are routed to this file, which I can handle well.

If you want to filter out this error from Sentry you can use beforeSend.

Sentry.init({
  beforeSend: (event) => {
    if (event.exception?.values?.[0].value.includes('Invariant: attempted to hard navigate to the same URL')) {
      return null;
    }
    return event;
  },
});

We have hit the same issue (our error tracker being full of “attempted to hard navigate to the same URL” errors). It can happen during normal use:

• a user has a page loaded in the browser
• a new version of the site is deployed, the previous build files are deleted
• the user clicks an anchor that happens to point to the same URL the user is already on (e.g. they click the current page’s entry in the navigation sidebar)
• Next attempts to load the props for the previous build’s page, which fails
• Next attempts to refresh the current page
• The exception is thrown because the old/new URLs are the same

In this scenario the exception seems like a false positive.

We also have this error in sentry, and I can reproduce it on our staging and production environment. I think it’s hard/impossible to replicate this within a sandbox.

The problem manifests when we deploy a new version of our next app. If a user is on the page and we deploy a new version you will see exactly this error in sentry and also in the browser console. The app itself continues to work, there are no issues for the user.

We also reload/refresh the page props whenever the user focuses the page again (e.g. by coming back to the browser) by using router.replace(router.asPath, undefined, { scroll: false }). So the user does not work with stale data. This might lead to the issue.

We assume it happens because of assets path changed/are not available anymore, due to the pod change, it’s handled here https://github.com/vercel/next.js/blob/06ed494480f5ef55f15407dc819f97b45ba93cbb/packages/next/src/shared/lib/router/router.ts#L1935

No hard navigation is happening because we actually haven’t changed the URL, this is when the error is logged in the console/sentry https://github.com/vercel/next.js/blob/06ed494480f5ef55f15407dc819f97b45ba93cbb/packages/next/src/shared/lib/router/router.ts#L827

We are currently using next@13.1.1 but had this problem also with v12.

Yes, sentry is still screaming about this error even in v13.0.5-canary.6.

I’m getting this error in development as well. It happens when im using Link to route to the current url

I checked some canary releases of next.js. The bug was introduced in 12.1.7-canary.32. And my bet is this PR: #37431

changelog: https://github.com/vercel/next.js/compare/v12.1.7-canary.31...v12.1.7-canary.32

Also still having it. It’s a pity 😕

Correct. I should have referenced middleware. Someone on the duplicate issue mentioned that in 13.1.1 and above it seems that middleware is running multiple times, 3 I believe. So downgrading keeps it to only running once and not doing any of the ‘attempted to hard navigate to the same URL’ issues

And this issue says ‘on iPhone’ but downgrading solved Web related issues with 404 page as well

We cannot recreate the issue with the provided information. Please add a reproduction in order for us to be able to investigate.

Why was this issue marked with the please add a complete reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository (template), but you can also use a tool like CodeSandbox or StackBlitz.

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue.

Please test your reproduction against the latest version of Next.js (next@canary) to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). “example.com”, “n/a”, “will add later”, etc. are not acceptable links – we need to see a public codebase. See the above section for accepted links.

What happens if I don’t provide a sufficient minimal reproduction?

Issues with the please add a complete reproduction label that receives no meaningful activity (e.g. new comments with a reproduction link) are automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue with the required reproduction.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment “I have the same issue” without repro steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren’t you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

Able to reproduce this issue every time when using onClick={()=> window.open(“/anyURL”, “_blank”)}

replacing it with an achor tag fixed the issue for me.

Why hasn’t this problem been solved yet?

Please can you show how you achieved this?

I don’t find how to fix it. But in the meanwhile this get a fix, you can delete your custom 404 (404.js). This error happens to me when i handle inexistent pages.

I am also having this error while using router.push().

Looks a bit like #44919 and #44293. I am also getting this error in dev, but on a build it also does not work as expected, specifically for the error/404 page.

Getting the same issue, haven’t been able to replicate it but getting sentry errors every day about it. I’m on next@13.0.6

Edit: The error seems to happen without any user input, the page loads and 4 seconds later the error pops up. I’m starting to think it may have something to do with the cookie modal, we’re using cookiebot.

Same, continuously getting this issue on Sentry.

Error:

Invariant: attempted to hard navigate to the same URL

Device: Browser: Mobile Safari (Version:16.2) Device: iPhone OS: iOS 16.2