feature/intl : Material-ui does'nt works on safari (mac, ios)

[MikeCodeur]

Material-ui does'nt works on safari (mac, ios).

step to reproduce :

clone : branch feature/intl
add

"material-ui": "0.14.4", to package.json

and add some material-ui components.

All events are breaks

Safari console

[React Intl] The Intl APIs must be available in the runtime, and do not appear to be built-in. An Intl polyfill should be loaded.↵See: http://formatjs.io/guides/runtime-environments/"

[MikeCodeur]

To solve it add

import './serverIntlPolyfill';

to

/src/client.js

[langpavel]

This should be solved clever.
References:

• I18n in JavaScript (react-intl wiki)
• How to Polyfill Browsers (formatjs.io guides)
• Intl.js and Browserify/webpack (Intl.js GitHub)

[MikeCodeur]

Yes you're right.
What do you think of create (like serverIntlPolyfill) a file called clientIntlPolyfill.js.
then I include it in client.js import './clientIntlPolyfill';

clientIntlPolyfill may look like

import areIntlLocalesSupported from 'intl-locales-supported';

import { locales } from './config';

if (window.Intl) {
  // Determine if the built-in `Intl` has the locale data we need.
  if (!areIntlLocalesSupported(locales)) {
    // `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.
    const IntlPolyfill = require('intl');
    Intl.NumberFormat = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
  }
} else {
  // No `Intl`, so use and load the polyfill.
  window.Intl = require('intl');
}

[langpavel]

import areIntlLocalesSupported from 'intl-locales-supported';

import { locales } from './config';

Bad idea to import config.js See #633 and #631

if (window.Intl) {
  // Determine if the built-in `Intl` has the locale data we need.
  if (!areIntlLocalesSupported(locales)) {
    // `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.
    const IntlPolyfill = require('intl');

This will pack polyfill into bundle don't matter if it will be really used.

    Intl.NumberFormat = IntlPolyfill.NumberFormat;
    Intl.DateTimeFormat = IntlPolyfill.DateTimeFormat;
  }
} else {
  // No `Intl`, so use and load the polyfill.
  window.Intl = require('intl');

So this, bundle, don't matter if it will be really used.

}

Code splitting and require.ensure should be used here, before application is loaded. This means entire new entrypoint for client application.

[bravo-kernel]

🚜 (as I would like to track this issue)

[ulani]

@mika75 thank you very much for crating this issue! Unfortunately, we have close it due to inactivity. Feel free to re-open it or join our Discord channel for discussion.

NOTE: The main branch has been updated with React Starter Kit v2, using JAM-style architecture.