The message IDs should be defined in one of these 3 ways:
// 1. In `formatMessage` directly
formatMessage({ id: 'message-id-here' })
// 2. In `FormattedMessage` directly
<FormattedMessage id="message-id-here" />
// 3. Or by defining them in a `defineMessages` or `defineMessage`
const messages = defineMessages({
custom: { id: 'message-id-here' },
})
This is because, in the future, we can use a tool that will make a static analysis of the code to extract the used keys. Like this one: https://formatjs.github.io/docs/tooling/cli
// we can't do this
const message = condition ? 'foo.bar' : 'xpto.ada'
// message is a variable and cannot be read in static analysis
formatMessage({ id: message })