Remove defaultMessages from the production build.

Don't run the application before active locale will be loaded

babel.config.js

@@ -1,6 +1,7 @@
 /* eslint-env node */
 // @ts-nocheck
 module.exports = function (api) {
+    const env = api.env();
     api.cache(true);
 
     return {
@@ -39,6 +40,7 @@ module.exports = function (api) {
                     removePrefix: 'packages.app',
                     messagesDir: './build/messages/',
                     useKey: true,
+                    removeDefaultMessage: env === 'production',
                 },
             ],
         ],

package.json

@@ -117,7 +117,7 @@
         "@typescript-eslint/eslint-plugin": "^3.0.0",
         "@typescript-eslint/parser": "^3.0.0",
         "babel-loader": "^8.0.0",
-        "babel-plugin-react-intl-auto": "^3.3.0",
+        "babel-plugin-react-intl-auto": "https://github.com/elyby/babel-plugin-react-intl-auto.git#build",
         "core-js": "3.6.5",
         "csp-webpack-plugin": "^2.0.2",
         "css-loader": "^3.5.3",

packages/app/components/i18n/IntlProvider.tsx

@@ -5,12 +5,14 @@ import i18n from 'app/services/i18n';
 import { RootState } from 'app/reducers';
 
 const IntlProvider: ComponentType = ({ children }) => {
-    const [intl, setIntl] = useState<IntlShape>(i18n.getIntl());
+    const [intl, setIntl] = useState<IntlShape>();
     const locale = useSelector(({ i18n: i18nState }: RootState) => i18nState.locale);
 
     useEffect(() => {
         if (process.env.NODE_ENV === 'test') {
             // disable async modules loading in tests
+            setIntl(i18n.getIntl());
+
             return;
         }
 
@@ -19,6 +21,11 @@ const IntlProvider: ComponentType = ({ children }) => {
         })();
     }, [locale]);
 
+    // don't run the application until locale bundle will be loaded
+    if (!intl) {
+        return null;
+    }
+
     return <RawIntlProvider value={intl}>{children}</RawIntlProvider>;
 };
 

packages/app/components/user/factory.ts

@@ -2,6 +2,7 @@ import { authenticate, logoutStrangers } from 'app/components/accounts/actions';
 import { getActiveAccount } from 'app/components/accounts/reducer';
 import request from 'app/services/request';
 import { Store } from 'app/reducers';
+import i18n from 'app/services/i18n';
 
 import { changeLang } from './actions';
 import bearerHeaderMiddleware from './middlewares/bearerHeaderMiddleware';
@@ -44,6 +45,10 @@ export function factory(store: Store): Promise<void> {
 
             // auto-detect guest language
             await store.dispatch(changeLang(user.lang));
+        })
+        .then(() => {
+            // Preload the current locale before app will be started
+            i18n.require(store.getState().i18n.locale);
         });
 
     return promise;

packages/app/services/i18n/i18n.ts

@@ -70,7 +70,7 @@ class I18N {
         locale: string,
     ): Promise<{
         locale: string;
-        messages: { [key: string]: string };
+        messages: Record<string, string>;
     }> {
         const [{ default: messages }] = await Promise.all([
             import(/* webpackChunkName: "locale-[request]" */ `app/i18n/${locale}.json`),

yarn.lock

@@ -4637,10 +4637,9 @@ babel-plugin-react-docgen@^4.0.0:
     react-docgen "^5.0.0"
     recast "^0.14.7"
 
-babel-plugin-react-intl-auto@^3.3.0:
+"babel-plugin-react-intl-auto@https://github.com/elyby/babel-plugin-react-intl-auto.git#build":
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-intl-auto/-/babel-plugin-react-intl-auto-3.3.0.tgz#75c6ba8a1eb442f43c2ab85f1a75f4cc1e0d7857"
+  resolved "https://github.com/elyby/babel-plugin-react-intl-auto.git#99d72ec15025aecbe62d422c3b0fafe3fcd0a787"
-  integrity sha512-08ZyGWtKrQY/rMNfdvrWPBsjqx+8CirqV4/JUM46FAS2aU98Mi/uWM60K6Wg6Zapdyqs3fCbQ8S4OfqMPsBiqQ==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/traverse" "^7.9.0"