loading lottie-web animation in react issue

Question

Im trying to load a lottie-web animation in my react project but i keep getting this error and cant understand what it means

InvalidStateError: responseText is only available if responseType is '' or 'document'.

Here is my React component below:

import React, { Component } from "react";
import "./Submit.css";
import PropTypes from "prop-types";
import lottie from "lottie-web";

class Submit extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    lottie.loadAnimation({
      container: document.getElementById("animation"), // the dom element that will contain the animation
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "../anim/email.json" // the path to the animation json
    });
  }

  render() {
    return <div id="animation" />;
  }
}

Submit.propTypes = {};

export default Submit;

Any thoughts on what it could be?

Answer 1

The path should be a path lottie can do a network request to to get the JSON, not a filesystem path.

Try to serve email.json at the root by putting it in the public folder, and just use "/email.json" as path. You could also put a ref on the element in the render method to make it so that the component is completely modular.

Example

class Submit extends Component {
  ref = null;

  componentDidMount() {
    lottie.loadAnimation({
      container: this.ref,
      renderer: "svg",
      loop: true,
      autoplay: true,
      path: "/email.json"
    });
  }

  render() {
    return <div ref={ref => this.ref = ref} />;
  }
}