Material icons from ReactNative are missing (woff fonts corrupt on asset discovery capture)

[bahmutov]

In my project https://github.com/bahmutov/ReactNativeTodo I have Material icons loaded on the ReactNative project.

import {MaterialCommunityIcons} from '@expo/vector-icons';

<MaterialCommunityIcons
        testID="delete"
        name="trash-can"
        size={32}
        color={Colors.buttonActive}
        disabled={progress}
        onPress={deleteSelf}
/>

Locally and on CI everything loads just fine, the elements panel shows

The visual screenshots in the dashboard show empty placeholder symbol though

https://percy.io/bahmutov/ReactNativeTodo

Would be nice to know why it happens and how to mitigate this.

[Robdel12]

Hey @bahmutov! Thanks for the issue. Looking at a snapshot, it looks like these fonts are corrupt when captured in asset discovery. This has been an issue for us for a while, and it's related to how local dev servers are serving up fonts. When we capture those fonts in asset discovery, the response we're getting from the dev server is Mojibaked. There's a good amount of debugging that happened in #312 & percy/percy-protractor#222

All the debugging I've done shows the fonts are mojibaked by the time we're even served it in asset discovery. For some reason, dev servers (http-server, webpack dev server, etc) aren't serving fonts with the correct encodings. I haven't been able to dig into what exactly is going on in those dev servers, but serving it from a real server always fixes the issue (so far from what I've seen).

We do need to get to the bottom of this. I spent a few hours last week debugging this without much progress (mostly just reconfirming it's a local server issue).

---

@wwilsman we might need to dogpile debug this sometime this week and dig through the webpack dev server internals 🤨 It might also be related to common webpack config everyone uses (like an issue with file loaders, or something). I'm not sure, but it's along those lines somewhere

[bahmutov]

Thank you for the response, glad it is a reproducible problem

…

Sent from my iPhone

On Jun 21, 2021, at 18:44, Robert DeLuca ***@***.***> wrote:  Hey @bahmutov! Thanks for the issue. Looking at a snapshot, it looks like these fonts are corrupt when captured in asset discovery. This has been an issue for us for a while, and it's related to how local dev servers are serving up fonts. When we capture those fonts in asset discovery, the response we're getting from the dev server is Mojibaked. There's a good amount of debugging that happened in #312 & percy/percy-protractor#222 All the debugging I've done shows the fonts are mojibaked by the time we're even served it in asset discovery. For some reason, dev servers (http-server, webpack dev server, etc) aren't serving fonts with the correct encodings. I haven't been able to dig into what exactly is going on in those dev servers, but serving it from a real server always fixes the issue (so far from what I've seen). We do need to get to the bottom of this. I spent a few hours last week debugging this without much progress (mostly just reconfirming it's a local server issue). @wwilsman we might need to dogpile debug this sometime this week and dig through the webpack dev server internals 🤨 It might also be related to common webpack config everyone uses (like an issue with file loaders, or something). I'm not sure, but it's along those lines somewhere — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[github-actions]

This issue is stale because it has been open for more than 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[Robdel12]

Upgrading the latest CLI (v1.1.4) will solve this! https://github.com/percy/cli/releases/tag/v1.1.4

[bahmutov]

It has solved it, thank you so much @Robdel12

[Robdel12]

Wooo! This problem has been such a long running one. So happy to finally (hopefully) put it to bed 🎉