Safari Mobile Rendering Failure using composed FormattedMessage

[l0gicgate]

I'm having an issue with Safari Mobile rendering of composed FormattedMessage. I honestly have been trying to troubleshoot this for days without success.

The issue:
7 out of 10 times, the rendered message will display:
{count, plural, =0 {No Guests} =1 {1 Guest} other {# Guests}}

3 out of 10 times the rendered message displays correctly:
10 Guests

The string in the language file (JSON format, UTF-8 encoding):
{
  "string.id": "{count, plural, =0 {No Guests} =1 {1 Guest} other {# Guests}}",
}

I also tried adding \n characters to the string without success:
{
  "string.id": "{count, plural,\n =0 {No Guests}\n =1 {1 Guest}\n other {# Guests}}",
}

<FormattedMessage
  id="string.id"
  values={{ count: 10 }}
/>

It seems as if the faster the page loads (after first page load, JS is cached and loads faster), the more likely it is to happen. It doesn't happen on ANY other browser but Safari Mobile.

I connected my iPhone to Safari Web Inspector and there is nothing in the console, every other FormattedMessage displays correctly on the page BUT the composed ones.

Does anyone have any insight whatsoever on what it could be?

Thank you.

[ericf]

Which version of React Intl?

[l0gicgate]

I am using the latest React Intl release candidate.

Regards.

On Mar 29, 2016, at 5:25 PM, Eric Ferraiuolo notifications@github.com wrote:

Which version of React Intl?

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub

[ericf]

This looks like a race condition with loading React Intl's locale data into the browser. You should check the console for warns/errors and make sure the locale data is loaded and added to React Intl before you render the app.

[l0gicgate]

That would make a lot of sense, except that I'm using the "load" event of the script tag that gets asynchronously appended to the body to trigger the rendering of the app.

If the load event is fired, that means that the javascript within the tag has been put in memory already. Am I mistaken here or?

Also, whenever I'm plugged into the Safari console, the bug doesn't happen which would confirm the theory of a race condition being the culprit here. Being plugged into the web inspector slows down the loading process.

My question is, is there a callback from the Intl polyfill / locale data for when it loads?

[ericf]

If you're using <script async>, you'll need to coordinate everything to make sure your app's initial render doesn't kick off until all of its dependencies are loaded.

You'll have to debug how you're loading scripts.

[l0gicgate]

A quick update @ericf,

I ended up running some more testing and tried incorporating FormattedNumber which seemed to have solved the problem although I still think the original problem exists and should be looked into.

Here is the string from language file:

{
  "some.id": "{count, plural, =0 {No Guests} =1 {{formattedCount} Guest} other {{formattedCount} Guests}}"
}


const count = 10;

<FormattedMessage
  id="some.id"
  values={{
    count: count,
    formattedCount: <FormattedNumber value={count} />,
  }}
/>

Any ideas as to why that fixed it?

[l0gicgate]

@ericf I'm not using script async.

I'm using the load event of the script tag to trigger the rendering logic of my app. A loading indicator component is shown until all of the dependencies are loaded. Everything is done synchronously.

I think this should be looked into. As shown in my previous example, using FormattedNumber fixes the issue for an unknown reason.

If required I'll put a full blown test case together so you can test on your end. There is an issue here and it's not a race condition.

[ericf]

Feel free to add a unit test, or provide a small runable HTML+JS example that exhibits the issue.

[l0gicgate]

@ericf I created a repo to reproduce the issue. I also included a video which depicts the behavior.

The repo:
https://github.com/l0gicgate/react-intl-test

The proof of concept video:
https://www.youtube.com/watch?v=jw5VF-ACETI

I included both cases and you can clearly see that the FormattedMessages without the use of FormattedNumber fail often:

<IntlProvider locale={defaultLocale} messages={translations}>
  <div>
    <h3>
      <FormattedMessage
        id="some.id"
        values={{ count: count }}
      />
    </h3>
    <h3>
      <FormattedMessage
        id="some.other.id"
        values={{
          count: count,
          formattedCount: <FormattedNumber value={count} />,
        }}
      />
    </h3>
  </div>
</IntlProvider>

Regards.

[ericf]

You're problem is likely in the way you're loading scripts. I don't have time to look at this right now, but I'd recommend you get rid of this script loader and load the scripts normally in the HTML and see if the problem still exists.

Also you should be seeing errors logged to the console.