No sign of FlareComponent getting rendered

[obitodarky]

I'm using my animation in a react app and I used the following code to add my animation

    render={data => (
      <OuterContainer>
        <Container>
          <NameHeader>{data.site.siteMetadata.title}
          <FlareComponent width="200" height="200" animationName="green" file="light.flr" />
          </NameHeader>
          <Description>{data.site.siteMetadata.subtitle}</Description>
        </Container>
      </OuterContainer>
    )}

I checked the Component with my React Developer tool and this is what I found in my FlareComponent

The console showed me the following error

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data FlareReact.js:9534

Here is my React file for a reference. You can also find the flare files(I tried it with both Binary and JSON) in the components directory of the repo

[batbrain9392]

Try importing it like - import minion from './minion.flr'

[endurance21]

@obitodarky one thing about the CRA is that, file paths other than used in import/export must be relative to public/ folder because after build process, your final js is filled all into index.html by webpack in the CRA....

When browser renders index.html its assumes that there must './minion.flr' in the same folder as index.html that is inside of public folder..

So place your minion.flr file in public folder and Enjoy!!!