Adding Translated Text Using FormattedMessage

[EL-MEHDI-ESSAADI]

I'm working on adding a text with translation and understand that I should use the <FormattedMessage /> component from react-intl. However, I have a couple of questions:

1. How do I generate a message ID for the new text?
2. Should I manually add the new message to the local/defaultMessages.json file, or is there a script that automates this process? I noticed the extract-json-messages script in the package.json file, but when I run it, it clears out the defaultMessages.json file, leaving it empty ({}).

Here's the component code I'm working with:

<FormattedMessage defaultMessage="New Message" id="" />

I would appreciate any guidance on generating the message ID and properly updating the defaultMessages.json file. Thanks!

[poulch]

Hi @EL-MEHDI-ESSAADI

1. Message id should be automatically generated by eslint for you.
2. After finish work on translations run npm script npm run extract-messages

[EL-MEHDI-ESSAADI]

Thank you, @poulch, for your guidance. I was able to create the message ID using ESLint, but initially, the npm run extract-messages command didn't work for me.

After doing some research, I found that the issue was related to the extract-json-messages script in the package.json file. It turns out that single quotes ('') don't work on Windows Command Prompt (cmd.exe), as they are not recognized for enclosing arguments. Instead, double quotes ("") are the standard way to enclose arguments that contain spaces or special characters.

To resolve this issue, I changed the single quotes to escaped double quotes in the script, like so:

+"extract-json-messages": "formatjs extract \"src/**/*.{ts,tsx}\" --out-file locale/defaultMessages.json --format scripts/formatter.js"
-"extract-json-messages": "formatjs extract 'src/**/*.{ts,tsx}' --out-file locale/defaultMessages.json --format scripts/formatter.js",

With this modification, the script worked as expected. Thank you once again for your help!