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.