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.

Answer 1

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"
    });
  }
}