Don't use addLocaleData

src/app.js

@@ -12,7 +12,7 @@ import { Provider } from 'react-redux';
 import difference from 'lodash/difference';
 import mapValues from 'lodash/mapValues';
 import moment from 'moment';
-import { IntlProvider, addLocaleData } from 'react-intl';
+import { IntlProvider } from 'react-intl';
 import configureStore from './store';
 import routeConfiguration from './routeConfiguration';
 import Routes from './Routes';
@@ -23,24 +23,20 @@ import defaultMessages from './translations/en.json';
 
 // If you want to change the language, change the imports to match the wanted locale:
 //   1) Change the language in the config.js file!
-//   2) Import correct locale rules for React Intl library
+//   2) Import correct locale rules for Moment library
-//   3) Import correct locale rules for Moment library
+//   3) Use the `messagesInLocale` import to add the correct translation file.
-//   4) Use the `messagesInLocale` import to add the correct translation file.
+//   4) To support older browsers we need add the correct locale for intl-relativetimeformat to `util/polyfills.js`
 
 // Note that there is also translations in './translations/countryCodes.js' file
 // This file contains ISO 3166-1 alpha-2 country codes, country names and their translations in our default languages
 // This used to collect billing address in StripePaymentAddress on CheckoutPage
 
 // Step 2:
-// Import locale rules for React Intl library
-import localeData from 'react-intl/locale-data/en';
-
-// Step 3:
 // If you are using a non-english locale with moment library,
 // you should also import time specific formatting rules for that locale
 // e.g. for French: import 'moment/locale/fr';
 
-// Step 4:
+// Step 3:
 // If you are using a non-english locale, point `messagesInLocale` to correct .json file
 import messagesInLocale from './translations/fr.json';
 
@@ -75,13 +71,12 @@ const localeMessages = isTestEnv ? testMessages : messages;
 
 const setupLocale = () => {
   if (isTestEnv) {
-    // Don't change the locale in tests
+    // Use english as a default locale in tests
+    // This affects app.test.js and app.node.test.js tests
+    config.locale = 'en';
     return;
   }
 
-  // Add the translation messages
-  addLocaleData([...localeData]);
-
   // Set the Moment locale globally
   // See: http://momentjs.com/docs/#/i18n/changing-locale/
   moment.locale(config.locale);

src/components/FieldCurrencyInput/FieldCurrencyInput.example.js

@@ -1,10 +1,8 @@
 /* eslint-disable no-console */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { IntlProvider, addLocaleData } from 'react-intl';
 import { Form as FinalForm, FormSpy } from 'react-final-form';
-import en from 'react-intl/locale-data/en';
+import { IntlProvider } from '../../util/reactIntl';
-import fi from 'react-intl/locale-data/fi';
 import { currencyConfig } from '../../util/test-data';
 import * as validators from '../../util/validators';
 import FieldCurrencyInput, { CurrencyInput } from './FieldCurrencyInput';
@@ -24,13 +22,8 @@ const onChange = price => console.log('CurrencyInput - value:', price);
 
 // Different locales need to be initialized before their currency formatting is in use
 const CurrencyInputWithIntl = ({ locale, ...rest }) => {
-  if (locale === 'en') {
-    addLocaleData([...en]);
-  } else {
-    addLocaleData([...fi]);
-  }
   return (
-    <IntlProvider locale={locale}>
+    <IntlProvider locale={locale} textComponent="span">
       <CurrencyInput {...rest} input={{ onChange }} />
     </IntlProvider>
   );

src/util/test-helpers.js

@@ -3,8 +3,7 @@ import mapValues from 'lodash/mapValues';
 import Enzyme, { shallow, mount } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import toJson from 'enzyme-to-json';
-import { IntlProvider, addLocaleData } from 'react-intl';
+import { IntlProvider } from 'react-intl';
-import en from 'react-intl/locale-data/en';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import configureStore from '../store';
@@ -24,7 +23,6 @@ const testMessages = mapValues(messages, (val, key) => key);
 // store, i18n, router, etc.
 export const TestProvider = props => {
   const store = configureStore();
-  addLocaleData([...en]);
   return (
     <IntlProvider locale="en" messages={testMessages}>
       <BrowserRouter>