SnapSVGAnimator.js generates errors when loading in React web app

Question

SnapSVG extension for Adobe Animate.cc 2017 is able to create interactivity and animations for the web. I'm currently trying to use an exported SnapSVG Adobe Animate.cc project in my REACT JS WebApplication.

What I've done so far:

1. Imported snapsvg-cjs from npm( modified snapsvg to use succesfull in React)
2. Imported axios to load custom json file generated from SnapSVG extension in Animate.cc

3. Excluded minified code with eslintignore from SnapSVGAnimator. lib, generated while publishing SVG animation from Animate.cc to work properly without the ESlinting warnings.

4. Create a componentDidMount function

current code:

import React, {Component} from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { SVGAnim } from './SnapSVGAnimator.js';
import snapsvg from '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 I log const comp.

Uncaught (in promise) TypeError: 
_SnapSVGAnimator.SVGAnim is not a constructor

Answer 1

During the publish render in Animate.cc there are two libs generated; snapsvg.js and SVGAnimator.js

You can import snapsvg-cjs from NPM but SVGAnimator.js isn't available. Importing SVGAnimator.js with the ES6 approach from a curtain directory in your ReactApp isn't possible, not even by excluding it from linting with /* eslint-disable */ 1000 warnings still appears.

Instead of that, add the code to your index.html file, located in the public folder this way (I've used create-react-app to build this project):

<script type="text/javascript" src="%PUBLIC_URL%/libs/SnapSVGAnimator.min.js"></script>

This is the working code:

import React, { Component } from 'react';

//axios for asnyc usage*/
import axios from 'axios';

//Snapsvg-cjs works out of the box with webpack
import Snapsvg from 'snapsvg-cjs';

//snap.json is located in the 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;