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

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

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

@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?

@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”

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

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

@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.