LanguageDetector does not automatically detect language from browser

[pmichelfeit]

🐛 Bug Report

LanguageDetector does not automatically detect language from browser ( Mozilla Firefox 101, Google Chrome 102 )

To Reproduce

Use Mozilla Firefox 101 or Google Chrome 102 and change language in browser

Expected behavior

That it automatically switches languages according to the browsers settings

Your Environment

• runtime version: node 18.2.0
• i18next version: 21.8.4
• os: Windows

[adrai]

Seems to work... Pleqse provide a reproducible example.

[pmichelfeit]

This is the content of my i18n.js file:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import XHR from "i18next-xhr-backend";
import { initReactI18next } from "react-i18next";

import translationEN from "./i18n/locales/en/translations.json";
import translationDE from "./i18n/locales/de/translations.json";

i18n
  .use(XHR)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: false,

    // lng: "de", // automatically detected by browser
    fallbackLng: "en", // use en if detected lng is not available

    keySeparator: false, // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    },

    resources: {
      en: translationEN,
      de: translationDE
    },
    // have a common namespace used around the full app
    ns: ["translations"],
    defaultNS: "translations"
  });

export function changeLanguage(lng) {
  return i18next.changeLanguage(lng);
}

export default i18n;

[adrai]

You just pasted some code snippets... this is not a reproducible example.

Try something like this: https://codesandbox.io/embed/react-i18next-http-example-8guj0d?codemirror=1

[pmichelfeit]

In the above example, if you switch the language in the browser, the language is not changed too.

[adrai]

You may describe a bit with more detail on what you exactly mean. Seems to work here. Provide a video or screenshots

[pmichelfeit]

It should switch language automatically if you change the language in the browser

[jamuhl]

do you mean it should switch when you change it. without reloading?

also check if lng is already persisted in localstorage

[adrai]

check your local storage:

also check what navigator.languages is returning...

[jamuhl]

it does only detect on init...changing the language in browser does not change after init...if stored in localstorage it will also not change on reload

do you really expect the language to be changed and your content rerendered if you change browser language - without reloading the page?

[pmichelfeit]

Yeah, I expect that

[pmichelfeit]

This is how the local storage looks like:

And this is what navigator.languages is returning:

[adrai]

Yeah, I expect that

sorry, but this is not possible with this module...

scenario 1: the caches option is set to empty array => caches: []:

0. make sure the cache (localStorage) is empty (i18nextLng is not present)
1. the language is detected and used as language within i18next.
2. the user changes the browser language (navigator.languages changes)
3. on the next refresh of the page this plugin detects the new language

scenario 2: the caches option is NOT set to empty array:

0. make sure the cache (localStorage) is empty (i18nextLng is not present)
1. the language is detected and used as language within i18next AND cached (based on the config i.e. in localStorage).
2. the user changes the browser language (navigator.languages changes)
3. on the next refresh of the page this plugin detects the new language in the cache (the last used language)

[jamuhl]

Browser language is a rather static setting. I‘m not aware having changed that once in my livetime (beside during development).

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.