reactjsinternationalizationbabeljs

React error: Messages must be statically evaluate-able for extraction

I have the following code.

class InlineEditField extends Component {
render() {
...
return (
      <Row>
        <Column xs={3}>
          <b>
            <FormattedMessage id={`account.order.${label}`} defaultMessage="Order label" />
          </b>
        </Column>
      </row>
...
)
}
}

I am getting the following error

SyntaxError: /opt/lampp/htdocs/authnt/my-account/src/components/InlineEditField.js: [React Intl] Messages must be statically evaluate-able for extraction.
  45 |         <Column xs={3}>
  46 |           <b>
> 47 |             <FormattedMessage id={`account.order.${label}`} defaultMessage="Order label" />
     |                                   ^
  48 |           </b>
  49 |         </Column>

I am new in React and implementing this for the very first time. Also looked in other stack answers but ouldn't get it to work.

Solution

  • The id and defaultMessage fields on a <FormattedMessage> must be constant values because they are both used in pairs when internationalizing FormattedMessages.

    You can fix this error in the short run by changing your code to:

    <FormattedMessage id="gpn3x0" defaultMessage="Order label" />

    Each id value must be unique for different defaultMessage values - so if you have multiple defaultMessage values of "Order label", you can reuse the same id value "gpn3x0" for all of them to signify that you only need to internationalize the "Order label" string one time.