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?

Mixie

I think 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, and just write path: "email.json". – Souse

@Souse thanks! changing path to /email.json and putting the file in my public folder did the trick. i'm assuming it has to be in the public folder to make it accessible for the network request? – Mixie

Great! Yes, that's right. Everything in the public folder will be served from /. I think it's just a app.use(express.static('public')) under the hood. – Souse

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} />;
  }
}

Souse

What if I want to display animations with storybook? I would need a running local server to serve the files? – Marxismleninism

Answer 2

You can use animationData instead of path prop lottie.loadAnimation supports. The only thing you have to do is to convert the email.json file into a js file and save the json object inside of it into a const. If you export this const and then import it at the file you want to use it as :

 //email.js file
const email = {
//the json object
}

export default email.



//your other file

import Email from "../anim/email.js"

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

Mathre