Resolving blank page problem of Aurelia app with webpack on Safari

Posted on 2016-06-03 in Aurelia

While asking users to test an Aurelia application, it appeared that it didn't work on Safari due to this error:

Error in Safari console: Unhandled rejection webpackContextResolve

It comes from the fact that Safari doesn't support the internationalization (window.Intl) API.

In order to solve it, I had to manually include the Intl.js polyfill. Since it is already pulled as a dependency, I just had to adapt the bootstrap function of Aurelia with the setup code for Webpack of Intl.js:

bootstrap(aurelia => {
     if (!global.Intl) {
         console.log('Intl not present')
         require.ensure([
             'intl',
             'intl/locale-data/jsonp/en.js'
         ], function (require) {
             require('intl');
             require('intl/locale-data/jsonp/en.js');
             boot(aurelia);
         });
     } else {
         boot(aurelia);
     }
 });


 function boot(aurelia) {
     aurelia.use
         .standardConfiguration()
         .developmentLogging()
         .plugin('aurelia-i18n', (instance) => {
             let language = navigator.language.split('-')[0];

             // register backend plugin
             instance.i18next.use(XHR);

             function loadLocales(url, options, callback, data) {
                 switch (url) {
                     case 'en':
                         callback(enTranslations, { status: '200' });
                         break;
                     case 'fr':
                         callback(frTranslations, { status: '200' });
                         break;
                     default:
                         callback(null, { status: '404' });
                         break;
                 }
             }

             instance.setup({
                 backend: {
                     loadPath: '{{lng}}',
                     parse: (data) => data,
                     ajax: loadLocales,
                 },
                 lng: language,
                 attributes: ['t', 'i18n'],
                 fallbackLng: 'en',
                 debug: false,
             });
         });

     aurelia.start().then(() => aurelia.setRoot('app', document.body));
 }