Cannot format number when Intl polyfill is dynamically loaded

[gamtiq]

vue & vue-i18n version

vue - 2.5.17
vue-i18n - 8.3.2

What is actually happening?

When browser does not support Intl API (for example, Opera 12 or browser on an old Smart TV) and Intl.js polyfill is dynamically loaded via webpack's require.ensure, vue-i18n does not format numbers because value for VueI18n.availabilities is determined once upon loading of vue-i18n which is included in vendors chunk and loaded before application code where the polyfill is requested. As a result VueI18n.availabilities.dateTimeFormat and VueI18n.availabilities.numberFormat are set to false and _n method always returns empty string.

A possible fix is to define getter for VueI18n.availabilities:

let availabilities;
Object.defineProperty(VueI18n, 'availabilities', {
    get: function get() {
        return availabilities || (availabilities = {
            dateTimeFormat: typeof Intl !== 'undefined' && typeof Intl.DateTimeFormat !== 'undefined',
            numberFormat: typeof Intl !== 'undefined' && typeof Intl.NumberFormat !== 'undefined'
        });
    }
});

[gamtiq]

@kazupon If you approve the proposed fix, I can make the corresponding PR.

[nothingismagick]

Not sure if this is really a solution that will work for you, but I do the following:
Instantiate like this:

  app.i18n = new VueI18n({
    silentTranslationWarn: true,
    fallbackLocale: 'en',
    messages: {},
    dateTimeFormats: {},
    numberFormats: {}
  })

And then I load my en fallback:

  app.loadedLanguages = ['en']
  app.i18n.setLocaleMessage('en', require('src/i18n/locales/en.json'))
  app.i18n.setDateTimeFormat('en', app.i18n.messages.en.formats.dateTime)
  app.i18n.setNumberFormat('en', app.i18n.messages.en.formats.number)

When I lazy load a new language later I use this (in a router.beforeEach):

    app.i18n.setLocaleMessage(locale, require(`src/i18n/locales/${locale}.json`))
    app.i18n.setDateTimeFormat(locale, app.i18n.messages.en.formats.dateTime)
    app.i18n.setNumberFormat(locale, app.i18n.messages.en.formats.number)

(This is using Quasar, btw.)

[gamtiq]

A workaround is to change values of dateTimeFormat and numberFormat to true after Intl.js polyfill is loaded:

if (!global.Intl) {
    // Adding polyfill for browsers without support Intl
    require.ensure([
        'intl',
        'intl/locale-data/jsonp/en.js',
        'intl/locale-data/jsonp/ru.js'
    ], function (require) {
        require('intl');
        require('intl/locale-data/jsonp/en.js');
        require('intl/locale-data/jsonp/ru.js');
        VueI18n.availabilities.dateTimeFormat = VueI18n.availabilities.numberFormat = true;
         ...
    });
}

[IssueHuntBot]

@kazupon has funded $20.00 to this issue. See it on IssueHunt

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[exoego]

@gamtiq Are you still considering to open a PR for this?
If not, I will take this since I need this get fixed too.

[gamtiq]

@exoego I'm going to make a PR at this weekend.

[IssueHuntBot]

@gamtiq has submitted a pull request. See it on IssueHunt

[IssueHuntBot]

@kazupon has rewarded $28.00 to @gamtiq. See it on IssueHunt

• 💰 Total deposit: $40.00
• 🎉 Repository reward(20%): $8.00
• 🔧 Service fee(10%): $4.00