FormattedMessage with defaultMessage shows error on console

Question

The application I'm working on with has the option to add custom fields for a expecifc form and those fields does not support internationalization. However due to Components on our project, even after adding defaultMessage on FormattedMessage, we're receiving the following error:

[React Intl] Missing message: "Custom Field #01" for locale: "en", using default message as fallback.

Here's how our BaseInput was implemented.

class BaseInput extends Component {
  render() {
    let { id, style, label, required, errorMessage } = this.props;
    let errorClass = errorMessage ? "text-field-error" : "";

    return (
      <div className={errorClass} style={style}>
        <label
          id={`${id}_label`}
          name={`${id}_label`}
          className="ui-outputlabel"
        >
          <FormattedMessage id={label} defaultMessage={label} />
        </label>
        {required && <span className="wms-required-field"> *</span>}
        {this.generateInput()}
        {errorMessage && (
          <div className={"ui-message-error ui-widget ui-corner-all"}>
            <span id={`${id}_error`} className={"ui-message-error-detail"}>
              <FormattedMessage id={errorMessage} />
            </span>
          </div>
        )}
      </div>
    );
  }
}

I know the json doesn't have the translation for the given id. The problem I'm having is the error message on console even when adding the defaultMessage. Does anyone have any suggestion on how to resolve this problem?

Thanks in advance

Answer 1

You can prevent missing messages from appearing as errors in the console by implementing the onError handler of the provider. This will override the default behavior of writing to the console. You can choose to swallow the error.

<IntlProvider locale={locale} messages={messages} onError={handleTranslationError}>
  ...
</IntlProvider>

Handler

const handleTranslationError = err => {
  // swallow error
};

Answer 2

This is because you json doesn't have translation for the id given in the prop. Only the translations defined and provided in IntlProvider can be translated or default message will be shown.