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.

[vitaliiburlaka]

@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

[Dar0n]

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