Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FormattedMessage rich text replacements are not applied on build phase #121

Open
ixzzd opened this issue May 27, 2020 · 2 comments · May be fixed by #179
Open

FormattedMessage rich text replacements are not applied on build phase #121

ixzzd opened this issue May 27, 2020 · 2 comments · May be fixed by #179

Comments

@ixzzd
Copy link

ixzzd commented May 27, 2020

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 &lt;link1&gt;link&lt;/link1&gt; 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
Copy link

rizkysyazuli commented Nov 9, 2020

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

@MartinPavlik
Copy link

MartinPavlik commented Apr 13, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants