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

[bartek2341]

Verify canary release

• [X] 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

[wadehammes]

I also have these same Sentry logs and havent been able to figure them out

[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 :+1: 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 https://github.com/vercel/next.js/issues/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: https://github.com/vercel/next.js/compare/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 [email protected]

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.

[beckerei]

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 [email protected] but had this problem also with v12.

[bberz-groma]

I can verify that it must be related to the middleware file / method. When I remove the middleware file and method all together, I do not get this error. However, if I have a middleware file with an exported middleware method, the error returns.

[ijjk]

@bberz-groma can you share the contents of your middleware file that introduces the issue and what version of Next.js you are on?

[bberz-groma]

@ijjk I am on 13.1.2.

I stripped down my middleware file to only include an export of a method name like so to test the theory that it is in-fact related to the middleware file / method usage.

import { NextResponse } from 'next/server';

export function middleware() {
  return NextResponse.next();
};

This results in the error seen below when I visit my deployed application

[stuartkeith]

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.

[joggienl]

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.

[ethndotsh]

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

[getayush96]

Is there any update on this ? Facing this in chrome (macos) while accessing 404 page.

[getayush96]

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.

[wottpal]

Same issue here. I used redirects in my next.config.js as a workaround:

  async redirects() {
    return [
      {
        source: '/users',
        destination: '/',
        permanent: false,
      },
  // ...

[coded58]

Please can you show how you achieved this?

[nzkdevsaider]

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.

[browynlouis]

Experiencing same issue, is there no way around this?

[Benanna2019]

For anyone who comes up struggling with this, the temporary solution in other issues is to downgrade to version [email protected]

[joggienl]

If you are using middleware you might want to test that before downgrading. I do think this issue is duplicate of https://github.com/vercel/next.js/issues/44293. The same "temporary solution" was mentioned there as well.