Search code examples
javascriptinternationalizationpolyfills

What is the correct way to add locals using areIntlLocalesSupported and Browerify/webpack?


I am trying to internationalize a React JS application using Browserify and am following the examples from https://github.com/andyearnshaw/Intl.js/. When I try to load locales that will be supported by the app when Intl is not supported by the browser I try to do it like this:

// Intl polyfill
var areIntlLocalesSupported = require('intl-locales-supported');

var localesMyAppSupports = [
/* list locales here */
   'en-US',
   'bg-BG',
   'zh-Hans-CN',
   'ha-Arab',
   'fr-FR',
   'ru-RU',
   'de-DE',
   'eu-ES'
];

Is there another way to add locales that will be supported? There are no further examples in the documentation. It turns out that locales that I want't to use are not supported.

Here is the rest of the code:

if (global.Intl) {
// Determine if the built-in `Intl` has the locale data we need.
if (!areIntlLocalesSupported(localesMyAppSupports)) {
    // `Intl` exists, but it doesn't have the data we need, so load the
    // polyfill and replace the constructors with need with the polyfill's.
    global.Intl = require('intl');
    Intl.NumberFormat   = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
   }
 } else {
// No `Intl`, so use and load the polyfill.
global.Intl = require('intl');

require('intl/locale-data/jsonp/en-US.js');
require('intl/locale-data/jsonp/bg-BG.js');
//"zh-Hans-CN": Chinese written in simplified characters as used in China.
require('intl/locale-data/jsonp/zh-Hans-CN.js');
require('intl/locale-data/jsonp/ha-Arab.js');
require('intl/locale-data/jsonp/fr-FR.js');
require('intl/locale-data/jsonp/ru-RU.js');
require('intl/locale-data/jsonp/de-DE.js');
require('intl/locale-data/jsonp/eu-ES.js');
}

Solution

  • We just found out that I needed to add the require statements with locales int the inner if block like this:

    if (!areIntlLocalesSupported(localesMyAppSupports)) {
       // `Intl` exists, but it doesn't have the data we need, so load the
       // polyfill and replace the constructors with need with the polyfill's.
       global.Intl = require('intl');
       Intl.NumberFormat   = IntlPolyfill.NumberFormat;
       Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
       require('intl/locale-data/jsonp/en-US.js');
       require('intl/locale-data/jsonp/bg-BG.js');
       //"zh-Hans-CN": Chinese written in simplified characters as used in China.
       require('intl/locale-data/jsonp/zh-Hans-CN.js');
       require('intl/locale-data/jsonp/ha-Arab.js');
       require('intl/locale-data/jsonp/fr-FR.js');
       require('intl/locale-data/jsonp/ru-RU.js');
       require('intl/locale-data/jsonp/de-DE.js');
       require('intl/locale-data/jsonp/eu-ES.js');
     }