lottie-web: this.elements[i].destroy() is not a function

Tell us about your environment It happens on all browsers and all os-es

What is the issue?

When using Lottie we encountered a CSP issue when loading animations. This happend because Lottie uses eval() to render certain effects. The easy fix then was to make the switch to Lottie light.

Once this CSP issue was resolved, we got a new error when the animation was destroyed:

https://github.com/airbnb/lottie-web/blob/bf8217770e40cedad1f20ed52b24eddea9b82b77/player/js/renderers/SVGRenderer.js#L142-L155

this.elements[i].destroy() is not a function

The error occured because the elements array was not properly constructed and some items just contained the value true and (true).destroy() triggers the error above.

When looking for the reason why the element contained true we noticed that new SVGEffects() uses the EffectManager.

https://github.com/airbnb/lottie-web/blob/a9a82511344a46906a3c17121a019b1ef860b5e6/player/js/elements/svgElements/SVGEffects.js#L30-L33

This function still exists in Lottie light, but is empty. Lottie crashed on this and catches the error so it is not shown immediately. The browser error happens when destroying and not in the initial loading of the animation.

Solution

By preventing that we add any effects in Lottie light, the animation is loaded in the same way as before, but doesn’t crash when destroying.

I already created a PR (#2234) a while ago but I’m not sure if I should have made an issue first.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 21 (1 by maintainers)

Commits related to this issue

fixes #2275 added svg effects placeholder — committed to immutable/lottie-web-threejs by bodymovin 4 years ago
fixes #2275 added svg effects placeholder — committed to fmalita/lottie-web by bodymovin 4 years ago

Most upvoted comments

@bodymovin the issue for our project was that the Lottie-web calls eval without the proper try/catch and possibly without check if there are expressions to not.

https://github.com/airbnb/lottie-web/blob/8f905baeba08342a32202ec47339f5e1dbcbf4ad/player/js/utils/expressions/ExpressionManager.js#L375

With the strict Content-Security-Policy that does not allow usage of 'unsafe-eval' it was just throwing that vague this.elements[i].destroy() is not a function error

vitaliiburlaka on Oct 29, 2020

The issue for me happened in a Chrome extension when moved to MV3. It was because of the Content-Security-Policy which didn’t allow unsafe-eval. Changed to lottie-light and it worked

Donkfather on Jan 10, 2023

@bodymovin I am sorry to bring this up again, but it happens in our project as well. However, the errors point to react-lottie package. Can it be that it is using an outdated lottie-web version? Will it be updated?

Dar0n on Dec 17, 2020

@WartClaes version 5.7.5 should have it fully fixed

i use the version 5.7.5 ，however i still encounter this problem, my chrome version is 87.0.4280.88, when i use firefox it prompt that “Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”). lottie.js”

QuocVi1994 on Dec 17, 2020

@WartClaes I’ll see what I can do to prevent this.

bodymovin on Nov 1, 2020

still happening (also with react-lottie) while our app has a strict Content-Security-Policy… Is there any solution?

razbensimon on May 24, 2022

@bodymovin

Hi, can you share an example of an animation that triggers this error? I’m trying to reproduce it with the lottie_light.js player and I can’t.

@bodymovin I was able to reproduce the issue in my project using the file from @WartClaes.

vitaliiburlaka on Sep 29, 2020