Bit: Error when importin webfonts in the playground

[fabgallo]

Expected Behavior

Webfonts hosted in a Bit package get rendered properly

Actual Behavior

The browser complains with the following error and the font doesn't get rendered (the character is shown as a square):

Failed to decode downloaded font: https://<chunk>.capsule.ws/static/media/fa-regular-400.<chunk>.woff
OTS parsing error: incorrect file size in WOFF header

Steps to Reproduce the Problem

I created 2 public components in Bit to show the issue:

• https://bit.dev/fabgallo/tests/issue/fonts/~code where the fonts files are hosted (WOFF/WOFF2 format), which is a subset of FontAwesome Free
• https://bit.dev/fabgallo/tests/issue/hello-world is the component consuming the fonts

(I apologize for the big images)

1. go to https://bit.dev/fabgallo/tests/issue/hello-world
2. you will notice the following when the playground renders the component
   
3. when launched locally, everything works and the fonts are downloaded and rendered properly from Bit
   

Specifications

• Bit version: 14.0.3
• Node version: 10.15.2
• npm / yarn version: yarn 1.13.0
• Platform: macOS Mojave 10.14.3
• Bit compiler (include version): typescript v.0.0.5 (https://bit.dev/bit/envs/compilers/typescript)
• Bit tester (include version): n/a

[GiladShoham]

@fabgallo Thanks for reporting this.
I'll investigate this issue and post an update.

[GiladShoham]

@fabgallo Quick update:
It looks like the css file is being cut in half. (which cause that in the playground you have missing definitions).
This is not something about your css or component, I notice that long examples are being cut as well.
I'm still trying to understand where exactly in the pipe it's being cut.
I'll post my findings here.

[KutnerUri]

seems to be related to https://github.com/facebook/create-react-app/issues/923
they say the generated url could be faulty, but I checked with Postmen and it seems to be the file from the component.

so I am thinking it's a Loader issue inside the CreateReactApp in the Capsule?

[GiladShoham]

@KutnerUri It's working with regular create-react-app. And the one in the capsule is no different I think.
I'm not sure it's about the capsule.

[fjckls]

Any news on this one? I'm getting the same error, thus breaking my components on playground.

[guysaar223]

Hi, @fjckls
I found the problem, we are working to fix it.

Guy

[guysaar223]

@fabgallo @fjckls @KutnerUri
fixed :)

[fabgallo]

thanks @guysaar223 !!
I went back to my demo component and indeed it works correctly now. I will try with my other private components soon and report back in case of issues.