Error when importin webfonts in the playground

fabgallo commented 5 years ago

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)

go to https://bit.dev/fabgallo/tests/issue/hello-world
you will notice the following when the playground renders the component
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 commented 5 years ago

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

GiladShoham commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

guysaar223 commented 5 years ago

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

Guy

guysaar223 commented 5 years ago

@fabgallo @fjckls @KutnerUri fixed :)

fabgallo commented 5 years ago

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.

teambit / bit