enabling differentDomains leads to navigation issues

[cexbrayat]

Environment

---

• Operating System: Darwin
• Node Version: v16.17.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: pnpm@7.17.0
• Builder: vite
• User Config: app, css, modules, typescript, ignore, i18n, content
• Runtime Modules: @nuxtjs/i18n@8.0.0-beta.7
• Build Modules: -

---

Reproduction

The code in this stackblitz showcases the issue (but not directly in stackblitz, you have to download the code, then run npm install && npm run dev)

Describe the bug

Click on any links in the navbar and see that the navigation fails every second click.

In the following screencast, when I navigate from team to home, for example, the first click fails (it navigates but then returns to team very quickly). The second click works.

Additional context

I reproduce this behavior consistently in the minimal repro shared on stackblitz and in the real project where I'm using nuxtjs/i18n

Note that this is triggered by differentDomains: true. Maybe I'm missing something obvious in the configuration, but I've tried several combinations and nothing helps.

This happens with beta.6 and beta.7.

Logs

No response

[kazupon]

Thank you for your reporting!

When we will use defference domain, i18n module is changed routing behavior that is handled such as NuxtLink.
Enspecialy, when we are specifying localhost, it will result in unexpected behavior.
honestly, the defference domain is not easy to test, so there will still be bugs 😅

[cexbrayat]

@kazupon Thanks for your answer. Note that this behavior occurs with hosts different from localhost as well.

[nWacky]

Setting skipSettingLocaleOnNavigate: true in NuxtI18nOptions seems to have helped me

Example NuxtI18nOptions

i18n: {
  langDir: 'i18n',
  locales: [
    {
      code: 'en',
      name: "English",
      domain: 'example.com',
      file: 'en.json',
    },
    {
      code: 'fr',
      domain: 'fr.example.com',
      file: 'fr.json',
    },
  ],
  differentDomains: true,
  detectBrowserLanguage: false,
  skipSettingLocaleOnNavigate: true,
  defaultLocale: 'en',
  vueI18n: {
    legacy: false,
    fallbackLocale: 'en',
  },
}

[ReDev1L]

useCookie on setup true                                                                                                00:01:50
defautlLocale on setup en                                                                                              00:01:50
detectLocale: initialLocale - en                                                                                       00:01:50
detectBrowserLanguage: (path, strategy, alwaysRedirect, redirectOn, locale) - / prefix_except_default true no prefix en
getLocaleCookie { useCookie: true, cookieKey: 'lang_key', localeCodes: [ 'en', 'ru' ] }                                00:01:50
getLocaleCookie cookie undefined                                                                                       00:01:50
detectBrowserLanguage: cookieLocale undefined                                                                          00:01:50
getBrowserLocale accept-language { 'accept-language': 'ru,en;q=0.9,ru-RU;q=0.8' }                                      00:01:50
detectBrowserLanguage: browserLocale ru                                                                                00:01:50
detectBrowserLanguage: (matchedLocale, cookieLocale, localeFrom) - ru undefined navigator_or_header                    00:01:50
detectBrowserLanguage: first finaleLocale (finaleLocale, lcoaleForm) - ru undefined navigator_or_header                00:01:50
detectBrowserLanguage: vueI18nLocale en                                                                                00:01:50
detectBrowserLanguage: finalLocale !== vueI18nLocale ru                                                                00:01:50
detectLocale: detectBrowserLanguage (browserLocale, stat, reason, from) - ru true undefined navigator_or_header        00:01:50
detectLocale: finaleLocale first (finaleLocale, strategy) - ru prefix_except_default                                   00:01:50
detectLocale: finaleLocale second (finaleLocale, detectBrowserLanguage) - ru {                                         00:01:50
  alwaysRedirect: true,
  cookieCrossOrigin: false,
  cookieDomain: null,
  cookieKey: 'lang_key',
  cookieSecure: false,
  fallbackLocale: 'en',
  redirectOn: 'no prefix',
  useCookie: true
}
detectLocale: finalLocale last (finalLocale, defaultLocale) - ru en                                                    00:01:50
detectLocale: finalLocale - ru                                                                                         00:01:50
first detect initial locale ru                                                                                         00:01:50
final initial locale: ru                                                                                               00:01:50
locale-changing middleware {                                                                                           00:01:50
  fullPath: '/',
  hash: '',
  query: {},
  name: 'index___en',
  path: '/',
  params: {},
  matched: [
    {
      path: '/',
      redirect: undefined,
      name: 'index___en',
      meta: {},
      aliasOf: undefined,
      beforeEnter: undefined,
      props: [Object],
      children: [],
      instances: {},
      leaveGuards: Set(0) {},
      updateGuards: Set(0) {},
      enterCallbacks: {},
      components: [Object]
    }
  ],
  meta: {},
  redirectedFrom: undefined,
  href: '/'
} {
  fullPath: '/',
  path: '/',
  query: {},
  hash: '',
  name: 'index___en',
  params: {},
  matched: [
    {
      path: '/',
      redirect: undefined,
      name: 'index___en',
      meta: {},
      aliasOf: undefined,
      beforeEnter: undefined,
      props: [Object],
      children: [],
      instances: {},
      leaveGuards: Set(0) {},
      updateGuards: Set(0) {},
      enterCallbacks: {},
      components: [Object]
    }
  ],
  meta: {},
  redirectedFrom: undefined,
  href: '/'
}
detectLocale: initialLocale - ru                                                                                       00:01:50
detectBrowserLanguage: (path, strategy, alwaysRedirect, redirectOn, locale) - / prefix_except_default true no prefix ru
getLocaleCookie { useCookie: true, cookieKey: 'lang_key', localeCodes: [ 'en', 'ru' ] }                                00:01:50
getLocaleCookie cookie undefined                                                                                       00:01:50
detectBrowserLanguage: cookieLocale undefined                                                                          00:01:50
getBrowserLocale accept-language { 'accept-language': 'ru,en;q=0.9,ru-RU;q=0.8' }                                      00:01:50
detectBrowserLanguage: browserLocale ru                                                                                00:01:50
detectBrowserLanguage: (matchedLocale, cookieLocale, localeFrom) - ru undefined navigator_or_header                    00:01:50
detectBrowserLanguage: first finaleLocale (finaleLocale, lcoaleForm) - ru undefined navigator_or_header                00:01:50
detectBrowserLanguage: vueI18nLocale ru                                                                                00:01:50
detectLocale: detectBrowserLanguage (browserLocale, stat, reason, from) - ru true undefined navigator_or_header        00:01:50
detectLocale: finaleLocale first (finaleLocale, strategy) - ru prefix_except_default                                   00:01:50
detectLocale: finaleLocale second (finaleLocale, detectBrowserLanguage) - ru {                                         00:01:50
  alwaysRedirect: true,
  cookieCrossOrigin: false,
  cookieDomain: null,
  cookieKey: 'lang_key',
  cookieSecure: false,
  fallbackLocale: 'en',
  redirectOn: 'no prefix',
  useCookie: true
}
detectLocale: finalLocale last (finalLocale, defaultLocale) - ru en                                                    00:01:50
detectLocale: finalLocale - ru                                                                                         00:01:50
detect locale ru                                                                                                       00:01:50
localeSetup false                                                                                                      00:01:50
setLocale: new ->  ru  old ->  ru  initial ->  false                                                                   00:01:50
detectRedirect: targetLocale ->  ru                                                                                    00:01:50
detectRedirect: route ->  {                                                                                            00:01:50
  fullPath: '/',
  hash: '',
  query: {},
  name: 'index___en',
  path: '/',
  params: {},
  matched: [
    {
      path: '/',
      redirect: undefined,
      name: 'index___en',
      meta: {},
      aliasOf: undefined,
      beforeEnter: undefined,
      props: [Object],
      children: [],
      instances: {},
      leaveGuards: Set(0) {},
      updateGuards: Set(0) {},
      enterCallbacks: {},
      components: [Object]
    }
  ],
  meta: {},
  redirectedFrom: undefined,
  href: '/'
}
extendSwitchLocalePathIntercepter: domain ->  http://ru.localhost:3000/  path ->  /                                    00:01:50
detectRedirect: calculate domain routePath ->  http://ru.localhost:3000/                                               00:01:50
redirectPath on locale-changing middleware http://ru.localhost:3000/                                                   00:01:50
navigate options  302 null true false                                                                                  00:01:50
redirect state ->                                                                                                      00:01:50
differentDomains servermode  http://ru.localhost:3000/                                                                 00:01:50
extendSwitchLocalePathIntercepter: domain ->  http://localhost:3000/  path ->  /                                       00:01:50

is this related?

[kazupon]

I've just fixed, and released edge version @nuxtjs/i18n-edge@8.0.0-beta.7-27867903.cc6cc78
you can try to use edge version.

[Stiropor]

Setting skipSettingLocaleOnNavigate: true in NuxtI18nOptions seems to have helped me

Sir, you saved my day 🎉