Fail to load in Safari

[hadrienl]

Unhandled promise rejection – TypeError: undefined is not an object (evaluating 'this.services.languageUtils.toResolveHierarchy')

I'm submitting a bug report

• Library Version:
  1.0.0-rc.1.0.0

Please tell us about your environment:

• Operating System:
  OSX 10.11.5
• Node Version:
  6.2.0
• NPM Version:
  3.8.9
• JSPM OR Webpack AND Version
  JSPM 0.16.39
• Browser:
  Safari 9.1.1 | iOS 9 Safari
• Language:
  ESNext

Current behavior:

I export my app and I load it with gulp serve-export or by deploying it on my remote server. Safari throw me this error on app load:

Unhandled promise rejection TypeError: undefined is not an object (evaluating 'this.services.languageUtils.toResolveHierarchy')

And locales are not loaded:

Expected/desired behavior:

• What is the expected behavior?
  The error must not be thrown and the locales must be loaded in Safari.

[EisenbergEffect]

@zewa666 Ping.

[hadrienl]

Same problem with bundled deploy.

[hadrienl]

It works by adding intlto the bundles.js on bundle mode only:

'dist/aurelia': {
      'includes': [
        'core-js',
        'aurelia-framework',
        'aurelia-bootstrapper',
        'aurelia-fetch-client',
        'aurelia-router',
        'aurelia-animator-css',
        'aurelia-templating-binding',
        'aurelia-polyfills',
        'aurelia-templating-resources',
        'aurelia-templating-router',
        'aurelia-loader-default',
        'aurelia-history-browser',
        'aurelia-logging-console',
        'aurelia-event-aggregator',
        'aurelia-pal-browser',
        'aurelia-i18n',
        'intl'
      ],

[zewa666]

I m sorry but I don't have an iOS device so it's hard to replicate for me. Can you try to debug it a bit further to give me some guidance?

[hadrienl]

https://www.browserstack.com/ ;)
It fails the same on Safari OSX and Safari iOS. You should try with OSX which is more confortable to use.

[zakjan]

I had the same issue, adding intl to bundle fixed the problem for me. However I should be better fixed directly in the aurelia-i18n code, by importing intl instead accessing it from window global scope.

[zewa666]

@zakjan that actually should already happen here https://github.com/aurelia/i18n/blob/master/src/aurelia-i18n.js#L55
May I ask you to open up your app in Safari and debug that part? This of course won't fix the bundled version, since over there you have to take care of yourself to embed the necessary lazy loaded dependencies

[zewa666]

Maybe as an explanation why I didn't want to load the Polyfill automatically ... if you look at the distributed, minified version of the polyfill https://github.com/andyearnshaw/Intl.js/blob/master/dist/Intl.min.js you will see that it is 40kb in size. Now in most setups (except fancy Safari) that Polyfill won't ever be needed, but will introduce an unnecessary bundle/app size. As such the lazy loading should take care of that.

[zakjan]

@zewa666 Non-bundled version loads fine.

[zewa666]

OK so for the bundled version I don't really see a way to make that happen automatically without wasting precious space as mentioned before. As such we'll just stick to the README information displayed here: https://github.com/aurelia/i18n#internationalization-api-polyfill

[stsje]

I'm not sure that's acceptable. Aurelia is supposed to support all evergreen browsers, but now your i18n plugin doesn't even support the newest Safari version.
When wouldn't you want your app to work in the newest Safari? I bet most aren't just going to support Chrome, IE, Firefox, Opera and not Safari.

You mentioned the polyfill's size is an issue. Is it possible to find a polyfill implementing only the features we need, would it help on the size issue?

[stsje]

I see that the next Safari version (10) supports the API. Maybe we can delay the issue long enough till the next version comes out ;)

[zewa666]

@stsje yes Aurelia is supposed to support all evergreen browsers and even IE9. But the same way as you need to manually require the polyfill's for IE9 in order to not burden the rest of the handsome browsers, I see that Safari needs to be treated equally.

The minified version of the polyfill mentioned is already the bare minimum and so far I haven't found anything better. But a good thing is the mentioned Safari V10, including the API.

So all in all I don't see this as a too big issue since A, its only a matter for bundled deployments and B only for one of the top browsers. Whoever needs to support it, just needs to add the one extra line in bundling. I think this should be acceptable until Apple's browser finally becomes mature.

[hadrienl]

Maybe you should highlight the doc part and explain how to set any environnements (jspm, requirejs, webpack) to be able to load i18n on safari. It fails on iOS which the biggest market share on mobile when bundling and may discourage teams trying Aurelia.

[zewa666]

I'm happily accepting PRs that describe that in such a detail you guys think would be sufficient.