reactjs - SnapSVGAnimator.js generates errors when loading in React web app -

snapsvg extension adobe animate.cc 2017 able create interactivity , animations web. i'm trying use exported snapsvg adobe animate.cc project in react js webapplication.

what i've done far:

1. imported snapsvg-cjs npm( modified snapsvg use succesfull in react)
2. imported axios load custom json file generated snapsvg extension in animate.cc

3. excluded minified code eslintignore snapsvganimator. lib, generated while publishing svg animation animate.cc work without eslinting warnings.

4. create componentdidmount function

current code:

import react, {component} 'react'; import { link } 'react-router-dom'; import axios 'axios'; import { svganim } './snapsvganimator.js'; import snapsvg 'snapsvg-cjs';    componentdidmount(){     axios.get(jsonfile)       .then(response => {         const json = response.request.responsetext;         const comp = new svganim(json);         console.log(comp)       });   } 

problem

following error appears while log const comp.

uncaught (in promise) typeerror:  _snapsvganimator.svganim not constructor 

during publish render in animate.cc there 2 libs generated; snapsvg.js , svganimator.js

you can import snapsvg-cjs npm svganimator.js isn't available. importing svganimator.js es6 approach curtain directory in reactapp isn't possible, not excluding linting /* eslint-disable */ 1000 warnings still appears.

instead of that, add code index.html file, located in public folder way (i've used create-react-app build project):

<script type="text/javascript" src="%public_url%/libs/snapsvganimator.min.js"></script>

this working code:

import react, { component } 'react';  //axios asnyc usage*/ import axios 'axios';  //snapsvg-cjs works out of box webpack import snapsvg 'snapsvg-cjs';  //snap.json located in public folder, dev-build folder(ugly approach). let jsonfile = "snap.json";  class svganimator extends component {    constructor(props){     super(props);     this.state = {       data: ''     }   }   componentdidmount(){     axios.get(jsonfile)       .then(response => {         this.setstate({ data: response.data })       });   }    getsvg(){     if(this.state.data){       const container = document.getelementbyid('container');       const svg = new window.svganim(this.state.data, 269, 163, 24)       container.appendchild(svg.s.node);     }   }    render() {     return (       <div id="container">         { this.getsvg()}       </div>     );   } }  export default svganimator;