I wrote a plugin that goes through all my locale files and combine them into a single json file per locale, where each key follows the directory structure.

scenes/Home/locales/en.json has some locales:

{
menuLabel: "Menu"
}

The plugin generates a file per locale, /public/locales/en.json that I download when the app boots, which looks like this:

{
"scenes.Home.menuLabel": "Menu"
}

Then using React-Intl, I inject the content to the IntlProvider and use it that way:

<FormattedMessage id="scenes.Home.menuLabel" />

Javascript Application Developer

Javascript Application Developer