[Error] Error: <svg> attribute viewBox: Expected number, ...

💬 들어가며

react로 프론트 개발 중 디자인팀에게 움직이는 이미지를 .json 형식의 lottie로 받았다.
이미지를 lottie로 받은 건 처음이라 구글링하다 react-lottie 라는 라이브러리가 있길래 사용해보기로 했다.

공식 문서를 참고해서 lottie만 출력하는 LottieImg 컴포넌트를 만들고 props로 .json 형태의 lottie 파일을 넘겨주기로 했다.

특별한 조건은 없어서 defaultOptions는 간단하다. 👏

/* LottieImg.jsx */

import React from 'react';
import Lottie from 'react-lottie';

function LottieImg({lottieFile}) {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: lottieFile,
  };

  return <Lottie options={defaultOptions} />;
}

export default LottieImg;

그리고 다음과 같이 LottieImg를 사용한다. 🤔

/* test.jsx */

import * as test from '../lottie/test.json';

function Test() {
  return (
    <div>
    	<p>lottie 테스트</p>
        <LottieImg lottieFile={test} />
    </div>
  );
}

export default test;
...

❓ 문제 상황

그런데 이미지가 뜨지 않고 다음과 같은 에러가 발생했다.

Error: <svg> attribute viewBox: Expected number, "0 0 undefined undefi…".
Error: <svg> attribute width: Expected length, "undefined".
Error: <svg> attribute height: Expected length, "undefined".
Error: <rect> attribute width: Expected length, "undefined".
Error: <rect> attribute height: Expected length, "undefined".

💡 문제 해결

import한 lottie 파일을 넘겨줄 때 .default를 붙이면 된다.

<LottieImg lottieFile={test.default} />

나처럼 컴포넌트를 따로 만들지 않고 쓴다면 defaultOptions의 animationData 부분을 수정하면 된다.

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: lottieFile.default, // <- 이렇게!
  };

위와 같은 방법을 시도하니 이미지와 애니메이션이 정상적으로 출력되고, 에러도 사라졌다.

더 구글링해보니, 파일 import 방식을 변경하면 자동으로 기본 값을 가져오기 때문에 .default를 붙이지 않아도 해결되는 더 간단한 방법을 찾았다.

import * as test from '../lottie/test.json'; // (x)
import test from '../lottie/test.json'; // (o)

🔗 참고

• vue-lottie github issue

피드백은 언제나 환영합니다 ❤