I came across this following issue and couldn’t figure out why:

in the root index.js file:

...
// Init intl to the default language Japanese.
initLocale(LANGUAGE_CODE.JAPANESE);
...

ReactDOM.render(
  <BrowserRouter>
    <MaterialUIControllerProvider>
        <App />
    </MaterialUIControllerProvider>
  </BrowserRouter>,
  document.getElementById('root')
);

and initLocale in defined as:

const initLocale = async (currentLocale) => {
  await intl.init({
    currentLocale,
    locales: {
      [LANGUAGE_CODE.ENGLISH]: require('locales/en-US.json'),
      [LANGUAGE_CODE.CHINESE]: require('locales/zh-CN.json'),
      [LANGUAGE_CODE.JAPANESE]: require('locales/ja-JP.json'),
    },
  });
};

in the code:

      {intl.get(
        'page_edit_modal_text_hint_next',
        { arg1: 'hahaha' }
      )}

and in the locale file of ‘locales/ja-JP.json’:

...
"page_edit_modal_text_hint_next": "現在選択されているすべての {arg1} 件の依頼に変更を適用いたします。よろしいでしょうか？",
...

Now, when the page renders, it is displaying:

現在選択されているすべての {arg1} 件の依頼に変更を適用いたします。よろしいでしょうか？

instead of :

現在選択されているすべての hahaha 件の依頼に変更を適用いたします。よろしいでしょうか？

why is the arg1 variable not working?

version:
“react-intl-universal”: “^2.11.1”,