Error: <svg> attribute width: Expected length, "undefined"

[Dara-To]

Not sure what's going on here. I used the same lottie file from another project and same code but got these errors.

I am able to render the animation but keeping errors in the console is not acceptable.

<Loader width={330} height={400} />

import React from "react"
import Lottie from "rangel-react-lottie"
import styled from "styled-components"

import animationData from "../../lotties/icons/logo-animation.json"

const Loader = props => {
  const { isLoading, width, height } = props

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  }

  return (
    <Container>
      <Lottie options={defaultOptions} width={width} height={height} isStopped={!isLoading} />
    </Container>
  )
}

export default Loader

[samzmann]

For those of you landing here now, this issue is cause by wrongly importing animationData from the json file.

In the README example, replace:

- import * as animationData from './pinjump.json'
+ import animationData from './pinjump.json'

// ...

const defaultOptions = {
  loop: true,
  autoplay: true, 
- animationData: animationData,
+ animationData,
  rendererSettings: {
   preserveAspectRatio: 'xMidYMid slice'
  }
}

[roger-ngx]

something really fun here is import * as animationData actually working on my web page but not in storybook. so i had to change to import * as animationData

[Monte47]

The above does not help me. This is my full code.

import React, { useEffect } from 'react'
import lottie from 'lottie-web'
import animationData from '../assets/lottie/Icon-heart_green.json'
// import animationData from '../assets/lottie/loading.json'

const Lottie = () => {
  useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector('#lottie-element'),
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    })
  }, [])

  return (
    <div>
      <div style={{ height: 200, width: 200 }} id="lottie-element" />
    </div>
  )
}

error is:

when I use the other animation (the one that is currently commented out) it works fine.

[albe68]

I know I'm not supposed to talk about other package here . But I got the same error in Razor Pay Package Node implementation.

[ompupul]

hy did you solved it????

[JonatasSilva01]

verifica se os atributos ou as tags estão certas talvez seja algo do em volta do contexto tive um problema semelhante a esse e o que me ajudou foi analisar os atributos que podem ter vindo sem informações