React intl template string throws a missed id warning

Question

I'm trying to inject some values into translated sentence via react-intl. Following official documentation I was able to define some template message into my Localization file and it looks like that.

ratingMsgTemplate: {
    id: "_ratingMsg",
    defaultMessage: "{pointCount, plural, one {{point}} other {{points}}}"
},

this field passed directly inside localization object.

than I'm using a custom Plural component which is very simple

import * as React from "react";

import { injectIntl } from "react-intl";
import { inject, observer } from "mobx-react";

const i18nPluralNumber = (props: any) => {
    const { locale, intl, msgId, ...msgParams } = props;
    let finalMessage;

    if (!(msgId in locale.messages)) {
        console.warn("Id not found in i18n messages list: " + msgId);
        finalMessage = msgId;
    } else {
        finalMessage = locale.messages[msgId];
    }

    return (
        <span className="plural-number-intl">
            {intl.formatMessage(finalMessage, { ...msgParams })}
        </span>
    );
};

export default inject("locale")(injectIntl(observer(i18nPluralNumber)));

here is the example of use

    <I18nPluralNumber
                msgId="ratingMsgTemplate"
                pointCount={shopPoints}
                point={formatMessage("point")}
                points={formatMessage("points")}
            />

It works like a charm except this pesky thing. In console I'm receiving this message: I18nPluralNumber.tsx:19 [React Intl] Missing message: "_ratingMsg" for locale: "de", using default message as fallback.

and it's correct because there is no any _ratingMsg id inside my translate file. Actually I added this id only because it's necessary following react-intl docs and without this ID it isn't working at all

Could anyone give some tip/advice how to manage this stuff? I'll be appreciated for any info.

score 0 · Answer 1 · answered Apr 04 '19 at 12:27

If it helps anyone. I didn't found any normal solution except this crutch. I've added the id with this key and duplicated the defaultMessage for each of it.

eg

ratingMsgTemplate: {
    id: "_ratingMsg",
    defaultMessage: "{pointCount, plural, one {{point}} other {{points}}}"
},

I just create the id - _ratingMsg with the defaultMessage value

_ratingMsg: "{pointCount, plural, one {{point}} other {{points}}}",
ratingMsgTemplate: {
    id: "_ratingMsg",
    defaultMessage: "{pointCount, plural, one {{point}} other {{points}}}"
},

now it doesn't throws warning about missed ID and it works like a template string.

Weird but I didn'd find any better solution

React intl template string throws a missed id warning

1 Answers1