[에러노트] Type 'undefined' is not assignable to type 'Element'.

vue에서 lottie-web을 써서 아래 코드를 작성함

const lottieRef = ref<Element | null>(null);

onMounted(() => {
    lottie.loadAnimation({
        container: lottieRef.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationLoading,
    });
    
});

여기서 container 부분에서 빨간줄이 떴다. 

 Type 'undefined' is not assignable to type 'Element'.

이런 에러가 떴다. 

undefined를 잡으면 null 문제라고 또 떴다. 

이것을 해결하는 방법은

const lottieRef = ref<Element | null>(null);

onMounted(() => {
    if(!lottieRef.value) return;

    lottie.loadAnimation({
        container: lottieRef.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationLoading,
    });
    
});

 

이렇게 체크를 해주면 된다. !