Problem with server side rendering & browser language redirection?

[lukaszflorczak]

Environment

• Operating System: Darwin
• Node Version: v19.6.1
• Nuxt Version: 3.2.2
• Nitro Version: 2.2.2
• Package Manager: pnpm@7.27.1
• Builder: vite
• User Config: modules, i18n
• Runtime Modules: @nuxtjs/i18n@8.0.0-beta.10
• Build Modules: -

i18n config

defaultLocale: 'en',
strategy: 'prefix_except_default',
langDir: 'locales',
detectBrowserLanguage: {
  useCookie: true,
  alwaysRedirect: true,
  redirectOn: 'root',
}

Reproduction

https://stackblitz.com/edit/nuxt-starter-f5us62?file=app.vue

Describe the bug

I found a very weird problem when the detectBrowserLanguage with the alwaysRedirect option is active.

My browser language is PL. The default app language is set to EN. When I visit the page I have problems with two things:

1. The flag of the current language is set to EN (US) – the value from the server side. I have to add v-if="isMounted" to render the proper value. key doesn't help.

The first one shows the EN (US) flag, and the second one shows the proper PL flag:

<img :src="`/flags/${currentLocale.flag}.svg`" :key="currentLocale.flag"/>
<img v-if="isMounted" :src="`/flags/${currentLocale.flag}.svg`" :key="currentLocale.flag"/>

2. The same thing applies to places when I use translations in v-html.

The first one shows an English translation, the second one – Polish (proper):

<p v-html="$t('test')" />
<p v-html="$t('test')" v-if="isMounted" />

It looks like the reactivity is lost, but if I change the language manually with the button and setLocale(), everything returns to normal.

Preview

Nagranie.z.ekranu.2023-02-23.o.14.04.27.mov

[kazupon]

Thank you for your reporting!
This is a bug.
related #1632

[tmlmt]

Hey @kazupon have you been able to work on this one? It's the only non-working feature I have at the moment, would love to see detectBrowserLanguage working again.

[kazupon]

@lukaszflorczak
Hi!
I'll try to re-install with nuxt latest version and nuxt i18n module edge channel version.
I seem that this issue is fixed.
So, Could you try to check again?

[lukaszflorczak]

@kazupon I upgraded nuxt to 3.6.3 and @nuxtjs/i18n to 8.0.0-beta.13 in reproduction: https://stackblitz.com/edit/nuxt-starter-f5us62?file=app.vue. Unfortunately, it looks the problem still exists 😔

[kazupon]

hmm... 🤔
nuxt i18n module can't get accept-language on stackbliz...
It works in the local environment.

[lukaszflorczak]

Ok, so I'll try it once again, locally. I let you know about the result soon.

[lukaszflorczak]

I tested locally and the problem doesn't exist anymore.

[rl-haege]

https://stackblitz.com/edit/nuxt-starter-f5us62?file=app.vue

Just checked that and it does work in development mode (npm run dev) but still does not work in SSG Mode with npm run generate. Can anyone confirm?