FormattedMessage rich text replacements are not applied on build phase

[ixzzd]

Hello, thank you for the great plugin!

I found one corner case of FormattedMessage rich text feature usage. Rich text replacements applied on runtime, instead of build time. This could be critical for SEO optimization and for page loading speed.

For example you have FormattedMessage like:

<FormattedMessage id="textWithLink" values={{
  link1: msg => (
    <a href="https://github.com/wiziple/gatsby-plugin-intl" >
      {msg}
    </a>
 )}} />

And translation:

"textWithLink": "I am text, click on <link1>link</link1> to open it",

After build this line this line in index.html file looks like this :

I am text, click on <link1>link</link1> to open it

But expected behavior is- render it fully on build time and looks like:

I am text, click on <a href="https://github.com/wiziple/gatsby-plugin-intl" >link</a> to open it

Here I made small reproduce repo: https://github.com/ixzzd/gatsby-react-intl-formatted-message-repro

Steps to reproduce:

• Run yarn build
• Open public/en/index.html file
• Search for "I am text" string

[rizkysyazuli]

I can confirm this. You can see it on a live site here: [edit: link removed] (on the CO₂ texts) And the flash of un-rendered tags is very visible during page loads. It's slow and looks real bad.

[MartinPavlik]

How have you resolved this? Have you switched to different plugin? If so, which one? Thanks 🍻

EDIT: It seems like this is an issue with react-intl, asked a question on SO here https://stackoverflow.com/questions/54392605/using-react-intl-but-return-value-is-escaped