Using lottie-react-web, Im getting the following console error: <svg> attribute viewBox: Expected number, "0 0 undefined undefined

Question

I've created a component from the lottie-react-web package.

import React from 'react';
import Lottie from 'lottie-react-web'
import animation from '../../src/animations/anim.json'

const LottieAnim = () => (
  <Lottie
    options = {{
      animationData: animation,
      loop: false,
      autoplay: true,
    }}
    width = "60px"
    height = "60px"
  />
)

export default LottieAnim

This works and builds successfully. When the DOM loads it is generating the wrapper div with the attributes defined. However, the svg in the div does not have defined viewbox parameters, as well as undefined width and height, along with the containing vectors inside the svg.

Answer 1

Should be animationData: animationData.default

See: https://github.com/chenqingspring/vue-lottie/issues/20