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

[bartek2341]

Verify canary release

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

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Home
Binaries:
Node: 18.12.0
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.0.3
eslint-config-next: 13.0.3
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Google Chrome v107.0.5304.107

How are you deploying your application? (if relevant)

next start, Digital Ocean

Describe the Bug

Hi, I just connected my production next.js app to the error tracker and noticed a lot of errors, which all give:
Error: Invariant: attempted to hard navigate to the same URL https://[domain-name]/[locale].

The error occurs only on localized versions of website and only on iPhone mainly safari v14, 15, 16 but also on Edge Mobile Version:107.0.1418 and Chrome Mobile iOS Version:107.0.5304.

Source of all errors:
{snip} dLocale.addLocale(router.asPath,router.locale)))throw Error("Invariant: attempted to hard navigate to the same URL ".concat(url," ").concat( {snip}

Example log:

It seems that after navigation to the same localized url it can't find the [locale].json file. This website does not implement getServerSideProps or getStaticProps.
I've tested all link components both on production, development, emulated safari browser but I haven't noticed any errors/warnings in the console and I don't know what can cause this behavior for iPhone visitors.

I was using Next.js v12.2.4 but the error still occurs after upgrading to v13. I am also using next-translate v1.6.0 in my project and I don't know if the error can be related to this package or to next.js itself.

Thanks

next.config.js

const nextTranslate = require("next-translate");
const { withSentryConfig } = require("@sentry/nextjs");

const moduleExports = {
  ...nextTranslate(),

  sentry: {
    hideSourceMaps: true,
  },
};

const sentryWebpackPluginOptions = {
  silent: true,
};

module.exports = withSentryConfig(moduleExports, sentryWebpackPluginOptions);

i18n.json

{
  "locales": ["pl", "en", "es", "ru", "tr", "zh", "hi", "fr", "ar", "bn", "pt", "id", "de", "it"],
  "defaultLocale": "pl",
  "localeDetection": false,
  "pages": {
    "*": ["common"],
    "/": ["index"],
  }
}

Expected Behavior

Normal navigation to the same localized route on iPhone device.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

Not relevant

To Reproduce

Not relevant

_NEXT-1367

[ijjk]

Hi, there were changes related to this in the most recent version of Next.js v13.0.4, can you please update and give it a try!

[bartek2341]

Hello, unfortunately updating to version 13.0.4 did not help. It's hard to reproduce the error as it only shows on iPhone but I think it might be similar to the example from #38171.

[ijjk]

The above example is fixed in the latest version, can you confirm those errors are in fact from the release after updating to v13.0.4?

[bartek2341]

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

[DavidWells]

I'm seeing this as well. Has anyone found a fix?

Details:

browser = Chrome 105.0.0 
browser.name = Chrome 
environment = production 
handled = no 
mechanism = onunhandledrejection 
os = Windows 10

[balazsorban44]

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

[johnkoehn]

This has been an issue for six months now #38171. The other ticket has a reproducible environment. Let's please prioritize getting this fixed

[cbouwense]

bumping this issue, getting the same issues in Sentry

[bobaaaaa]

My guess is, that there is a bug in next.js since 12.2.0. This has something to do with the "back-forward-cache" in safari. See https://web.dev/bfcache/ for more infos. We could work around this bug with the following hack:

const disableBrowserBackForwardCache = `
window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    location.reload();
  }
});
`;
<script dangerouslySetInnerHTML={{ __html: disableBrowserBackForwardCache }} />

We added this <script /> element as one of the first (!) children of <Head /> (next/head). It is important, that this script is executed as fast as possible on the client.

[bobaaaaa]

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: v12.1.7-canary.31...v12.1.7-canary.32

[mohsinht]

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

[bartek2341]

Unfortunately, it didn't work for me either

[DavidWells]

Getting a ton of these in prod. It's hard to reproduce though. Not sure what the underlying issue is.

I'm unclear on what the visitor experiences when they hit this. Does the next site show the hard failure? If so, 😅, need to get a fix in asap.

Thanks for looking into this issue ❤️

[jordienr]

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.

[kryptovergleichde]

We are getting this error with the Googlebot and Android Browser, on regular pages (not 404). Currently on Nextjs 13.2. Does anyone know a recent fix for this? Thanks in advance!

[nickngqs]

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

[leo-petrucci]

This might not help but in my case I have a "root" app which uses redirects to display other Next.js apps on its domain.

// redirects config for app running at http://localhost:3000
    {
      source: "/sub-app/:match*",
      destination: `http://localhost:3002/:match*`,
    },

I'm seeing this when setting fallback: true for pages that don't have a path returned from getStaticPaths specifically on apps that are rendered by the "root" app. The error does not happen if I visit the actual URL the sub-app is running on.

Funnily enough this causes fallback to not work at all, because router.query is always {} which is quite annoying.

I've however noticed that router.asPath is correct, so I've managed to work around my pages breaking by manually splitting my queries out of that string.

My project is quite big but I'll try making a reproduction.

Very crude reproduction:

1. My sub-app is running here
   a. It takes the query passed to it and renders it example
2. My other app is running here
   a. It renders routes from sub-app under /sub-app

If I visit https://vwdh7f-3000.csb.app/sub-app/working (which is a page that's been defined in getStaticPaths), it works just fine. However if I visit https://vwdh7f-3000.csb.app/sub-app/not-working (which isn't defined in getStaticPaths) router.query remains {} and the Error: Invariant: attempted to hard navigate to the same URL error appears.

[maccman]

Running into this error too.

[pythonwood]

same error for chat example, just change frontend port than it happend !
https://github.com/reflex-dev/reflex-chat

FRONTEND_PORT=3010 reflex run --loglevel debug

reflex --version 0.2.4

[huroh]

Just started getting this error too

[muftisamiullah]

same here, Im seeing this error not sure what went wrong?

[moaazbhnas228]

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.

@getayush96 Can you please explain how your workaround fixed the issue?

[olivermulari]

We are also getting this issue. Not very often but constantly. Thinking of ignoring this in sentry since we are able to handle it in client side. Next.js version 13.2.4.

For us it is happening 95% in iOS and 5% Mac OS X. 50% of mobile safari and 45% of mobile chrome.

[paplco]

having this issue also, Brave latest v1.58.124, next latest v13.4.19

[mattvb91]

Started gettinng this issue after adding this into my next.config because i need the host as part of my getServerSideProps

async rewrites() {
    return [
      {
        has: [
          {
            type: 'host',
            value: '(?<host>.*)',
          },
        ],
        source: '/',
        destination: '/:host',
      },
      {
        has: [
          {
            type: 'host',
            value: '(?<host>.*)',
          },
        ],
        source: '/:path*',
        destination: '/:host/:path*',
      },
    ];
  },

[jacobgoldfarb]

This happens when I try to add a 404.js page. Deleting middleware.js solves it, but isn't a valid fix for production. My middleware is dead simple and I don't suspect there's any logic in there that would cause this.

[samcx]

Hi everyone,

The latest on this issue seems to be related to a 404 page (based on the most recent comments), which seems to have deviated from the originally reported issue. A couple fixes has been pushed up since, but it seems not all edge cases have regarding this general issue been covered.

@mattvb91 @jacobgoldfarb Is it possible to create a new bug report so we can look at both of your issues separately?

I encourage others as well to create separate bug reports if they are still experiencing this on the latest version. At the moment, it is not feasible to maintain multiple edge cases (old or newly introduced) in a single large issue thread (creates a lot of noise), so I will be moving this conversation to Discussions soon!

[diptachoudhury]

I faced the same error, for the pages which had getServerSideProps.
On adding shallow: true to router.push or next/link resolved the issue for me

[destinyamba625]

I deleted .next modules folder and ran npm run dev again. It must have cached the route path. Thats what fixed it for me. Also had to delete browser history