I decided to use Intl on React because it can be combined with babel to automatically scan the app for strings to translate. The issue is that upon refreshing the page I can see shortly the 5-character keys that are automatically generated, instead of the default text. This lasts like 200 ms at most with a decent connection, then you can see the right text.

What I do is to add the message in my components:

<Button variant='outlined'>
  <FormattedMessage
     defaultMessage='BOOK NOW '
     description='Landing page button that enables users to book a room' />
</Button>

Then I run one of the script:

"localize": "npm run localize:extract && npm run localize:compile",
"localize:extract": "formatjs extract \"src/**/*.{ts,tsx}\" --ignore \"./src/**/*.{d,test}.{ts,tsx}\" --out-file src/i18n/source/strings.json --id-interpolation-pattern [sha512:contenthash:base64:6] --extract-source-location",
"localize:compile": "formatjs compile src/i18n/source/strings.json --out-file src/i18n/translated/en-US.json"

And a file "strings.json" gets generated with the following format:

[
...,
"w6dUlI": {
  "col": 44,
  "defaultMessage": "BOOK NOW",
  "description": "Landing page button that enables users to book a room",
  "end": 19431,
  "file": "src/components/popup/Landing.tsx",
  "line": 404,
  "start": 19218
},
...]

So it really seems that the process is working correctly. I have a provider that loads the correct locale, but in those 200 ms in which it is loading it should show the defaultMessage ( otherwise it wouldn't be called this way right?).

I took inspiration from this public repo This guy does a fantastic job illustrating how to use the package but unfortunately the issue I'm reporting happens also to his code.

I've noticed that if you add the id in the , that will be shown while rendering. I guess it is better than random characters but it defeats the point of the code generation.

I think the issue could be that when switching locale the correct json (but also strings.json with the default messages) might not have been downloaded yet, but I'm not able to confirm this.