Cannot format number when Intl polyfill is dynamically loaded

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]

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

[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