IE11 - Language Detection with navigator.language not working

Question

I've got a function running in a React app to detect a users browser language, this then updates the language preference for the site and serves the site as either en-GB (default), en-US or zh-Hans. The script only updates the language of the site if some variant of en-US or zh-Hans is detected.

Function which is causing the error is:

function* setLanguageFromBrowserSettings() {
  let lang = null;
  if ((navigator.languages[0] === "en-US") || (navigator.languages[0] === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.languages[0] === "zh") || (navigator.languages[0] === "zh-CN") || (navigator.languages[0] === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  } else if ((navigator.language === "en-US") || (navigator.language === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.language === "zh") || (navigator.language === "zh-CN") || (navigator.language === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  }
  if (lang) {
    yield put({
      type: "Translations/SetLocale",
      payload: lang
    });
  }
}

Error message is:

uncaught at anonymous at anonymous

 at anonymous

 TypeError: Unable to get property '0' of undefined or null reference

   at setLanguageFromBrowserSettings$ (http://10.0.0.80:3001/static/js/bundle.js:124136:11)

   at tryCatch (http://10.0.0.80:3001/static/js/bundle.js:85481:7)

   at invoke (http://10.0.0.80:3001/static/js/bundle.js:85715:9)

   at prototype[method] (http://10.0.0.80:3001/static/js/bundle.js:85533:9)

   at next (http://10.0.0.80:3001/static/js/bundle.js:83498:9)

   at proc (http://10.0.0.80:3001/static/js/bundle.js:83457:3)

   at resolveIterator (http://10.0.0.80:3001/static/js/bundle.js:83643:5)

   at runCallEffect (http://10.0.0.80:3001/static/js/bundle.js:83704:5)

   at runEffect (http://10.0.0.80:3001/static/js/bundle.js:83617:5)

   at next (http://10.0.0.80:3001/static/js/bundle.js:83502:9)

   at currCb (http://10.0.0.80:3001/static/js/bundle.js:83575:7)

   at end (http://10.0.0.80:3001/static/js/bundle.js:83543:18)

   at task.cont (http://10.0.0.80:3001/static/js/bundle.js:83286:11)

I can get language switching to pseudo-work in IE11 by modifying the code to:

function* setLanguageFromBrowserSettings() {
  let lang = "en-US";
  if (lang) {
    yield put({
      type: "Translations/SetLocale",
      payload: lang
    });
  }
}

Which means that the problem is in this block of code:

  if ((navigator.languages[0] === "en-US") || (navigator.languages[0] === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.languages[0] === "zh") || (navigator.languages[0] === "zh-CN") || (navigator.languages[0] === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  } else if ((navigator.language === "en-US") || (navigator.language === "en")) {
    lang = "en-US";
    console.log("Language set to en-US");
  } else if ((navigator.language === "zh") || (navigator.language === "zh-CN") || (navigator.language === "zh-Hans")) {
    lang = "zh-Hans";
    console.log("Language set to zh-Hans");
  }

The above works fine in Chrome and Firefox - just not IE (typically).

Does anyone have any idea what could be causing the above code block to fail in IE11? Any help very gratefully received.

For IE the `language` keyword is wrong, use `browserLanguage` and `systemLanguage` instead. — Andrei Todorut, Feb 01 '18 at 12:57

score 2 · Answer 1 · answered Jan 31 '18 at 11:02

2

IE does not have languages property in navigator Object.

It has userLanguage and Systemlanguage.

Please check How to getting browser current locale preference using javascript?

So in case of IE you might have to check navigator.userLanguage and navigator.Systemlanguage

answered Jan 31 '18 at 11:02

Vignesh Murugan

575
5
18

2

Thank you - your answer helped me figure out the issue. The code was failing because I was checking something which didn't exist - IE11 does have access to a navigator.language property which is what my IE11 specific code was checking but it was failing due to trying to check the value of the non-existent navigator.languages prop. – Michael Smith Jan 31 '18 at 11:10

score 0 · Accepted Answer · answered Jan 31 '18 at 11:09

The answer related to IE11 not having access to the navigator.languages property.

Needed to modify the code (could still do with refactoring!) to check whether the navigator.languages property was present, then test for languages and return if the conditions weren't met.

function* setLanguageFromBrowserSettings() {
  if (!navigator.languages) {
    if ((navigator.language === "en-US") || (navigator.language === "en")) {
      console.log("Language set to en-US");
      yield put({
        type: "Translations/SetLocale",
        payload: "en-US"
      });
    } else if ((navigator.language === "zh") || (navigator.language === "zh-CN") || (navigator.language === "zh-Hans")) {
      console.log("Language set to zh-Hans");
      yield put({
        type: "Translations/SetLocale",
        payload: "zh-Hans"
      });
    }
    return 0;
  }
  if ((navigator.languages[0] === "en-US") || (navigator.languages[0] === "en")) {
    console.log("Language set to en-US");
    yield put({
      type: "Translations/SetLocale",
      payload: "en-US"
    });
  } else if ((navigator.languages[0] === "zh") || (navigator.languages[0] === "zh-CN") || (navigator.languages[0] === "zh-Hans")) {
    console.log("Language set to zh-Hans");
    yield put({
      type: "Translations/SetLocale",
      payload: "zh-Hans"
    });
  }
}

IE11 - Language Detection with navigator.language not working

2 Answers2