Flare for React is NOT working properly

[scalybur]

After having tried everything, I conclude that flare is not working properly.

I thought that the imports were wrong, or that I was writing the component wrong, but no, as indicated by your own documentation, I followed the following steps.

npm install flare-react

import {FlareComponent} from 'flare-react'

<FlareComponent animationName='run' width={500} height={500} file='./actor.flr'/>

After this my component looks like this:

import React, {Component} from 'react'
import {FlareComponent} from 'flare-react'
import './LoadingDots.sass'

const LoadingDots = ()=>(

    <div className="LoadingDots">
    <h1>Loading</h1>
    <FlareComponent animationName='run' width={500} height={500} file='./actor.flr'/>
    </div>
)

export default LoadingDots

///////////

And the constant error is this:

VM3003:1 Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at _ReadActor (FlareReact.js:9361)
at FileReader.fileReader.onload (FlareReact.js:10014)
_ReadActor @ FlareReact.js:9361
fileReader.onload @ FlareReact.js:10014
load (async)
req.onload @ FlareReact.js:10013
load (async)
load @ FlareReact.js:10011
load @ FlareReact.js:50154
onGraphicsReady @ FlareReact.js:50221
(anonymous) @ FlareReact.js:50113
(anonymous) @ FlareReact.js:15756
setTimeout (async)
(anonymous) @ FlareReact.js:15753
Promise.then (async)
initialize @ FlareReact.js:15746
componentDidMount @ FlareReact.js:50112
commitLifeCycles @ react-dom.development.js:17334
commitAllLifeCycles @ react-dom.development.js:18736
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18948
(anonymous) @ react-dom.development.js:20418
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20417
performWorkOnRoot @ react-dom.development.js:20346
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
interactiveUpdates$1 @ react-dom.development.js:20495
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882

////////

Instead of viewing the animation, the static flare logo is displayed.

According to the instructions does not need any other dependence
"Based off of Flare-JS"

I think that it should not be so complicated to use Flare, since it is not a complex component.

Verify and improve Flare's documentation to react, its support and testing.

If anyone knows how to fix this I would be grateful, regards.

Nahuel Alejandro Cabrera

---

@luigi-rosso @2d-inc

[metelski]

@nahuelcabrera

I'm pretty sure that the request for actor.flr returns some error in response instead of JSON file with the animation. There may be some HTML/XML coming due to an invalid path or dev server configuration, and this is why you may getting < character.

I would check Webpack (or whatever you use) config if .flr files are actually served as static files and all the paths are correct.

Also you may set a temporary breakpoint or try console.log()ing what FlareReact.js > _ReadActor() function is actually trying to parse.

Good luck!

[JosephSaw]

Had the same error.

Fixed it by importing the static file like so,

import { FlareComponent } from 'flare-react';
import animation from 'assets/animation.flr' 

<FlareComponent animationName='idle' width={1000} height={500} file={animation }/>

Official docs, https://facebook.github.io/create-react-app/docs/adding-images-fonts-and-files

[Feenposhleen]

Your conclusion is wrong, and proclaiming it like this just shows your ignorance and disrespect toward the authors. It is your understanding of build processes, imports and file paths that is not working properly. Maybe I should create an issue.