[react-intl] Use of "defaultRichTextElements" print error directly to console without using "onError"

[javebers]

Which package?
react-intl 5.8.8

Describe the bug
When using "defaultRichTextElements" an error is printed directly to console for each formatted message without using "onError", so it can't be caught. I think that console error should be avoidable since using pre-compiled messages is a suggestion and not mandatory.

Error message: "[@formatjs/intl] "defaultRichTextElements" was specified but "message" was not pre-compiled.
Please consider using "@formatjs/cli" to pre-compile your messages for performance.
For more details see https://formatjs.io/docs/getting-started/message-distribution"

To Reproduce
Steps to reproduce the behavior:

• Add any defaultRichTextElements configuration to IntlProvider without pre-compiled messages

    <IntlProvider
        locale={locale}
        messages={messages}
        onError={(error) => { /* do nothing */ } }
        defaultRichTextElements={{
            b: (chunks) => <b>{chunks}</b>,
            br: () => <br />
        }}
    >

• Use <FormattedMessage {...} />

Expected behavior
No react-intl error should be printed on console

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 84

[longlho]

Any specific reason preventing you from precompiling?

[javebers]

Not really. I honestly didn't know until I saw the error that there was a possibility to use a precompiler, so I appreciate the suggestion. But until I make time to check it out, it can be a bit annoying to have an error message every time FormattedMessage is used.

[longlho]

yeah I understand but that's kinda the reason why we left it there as a console.error 😄

[javebers]

Sure, it serves its purpose that it's like this by default, but I still think one should be able to silence the error message. Or at least the error appears once and not every time a formatted message is used, to make it less invasive.

[longlho]

I'll keep this one open and if there's enough people wanting it we'll make the change :)

[electerious]

Is it correct that defaultRichTextElements prints an error, but adding the same mapping to FormattedMessage via values doesn't? Where is the difference?

[longlho]

defaultRichTextElements propagates to all messages while values only applies to that one message

[electerious]

But there isn't a difference in performance? Applying the same values map to all FormattedMessages would be the same as using defaultRichTextElements, just without the warning?

[longlho]

That's now where the perf hit comes. If you manually apply those in messages that need values, yes perf is the same. The issue is since defaultRichTextElements is ambient we don't know if a message needs it or not without parsing. And parsing takes time

[electerious]

Thanks for the clarification!

Porting a big project to the recommended way takes a while. It would therefore be great if the warning would be a warning instead of an error (console.warn instead of console.error). I can open a PR for this if that's something you agree with.

[longlho]

Yeah I'd be down for that

[salatielsql]

I'm not even using defaultRichTextElements but I'm getting hundreds of console.error saying:

[React Intl] "defaultRichTextElements" was specified but "message" was not pre-compiled. Please consider using "@formatjs/cli" to pre-compile your messages for performance.

My code:

      <IntlProvider locale={language} messages={messages(language)} defaultLocale="en">
         <App />
      </IntlProvider>

[longlho]

Do u have a repro?

[nicohagen]

Facing the same issue, just with warnings instead errors now, which are still spamming the console. Maybe IntlProvider can throw this warning once, but not for every single message?

[longlho]

Do you have a repro?

[nicohagen]

Do you have a repro?

The repro(duce?) is the same as the one in the original post. Add the defaultRichTextElements prop to <IntlProvider> while not using compiled messages and having a bunch of <FormatteMessage>.

[longlho]

Oh that's intentional. I thought you don't use it and the warnings still show up. What's stopping you from precompiling messages?

[nicohagen]

Nothing actually, I'd just prefer not to have the console spammed until it happened. A single notification about it would be enough as a reminder for this task. I take "Please consider using..." as a suggestion, but currently i feel kinda forced to do this asap to get my console back. Anyway, when it's intentional, so be it. Great feature btw! We still been on react-intl v2.4 so far and having proper richtext support now is awesome.

[longlho]

kk we can tweak the warning mechanism