lottie_light.js: ReferenceError: Can't find variable: CanvasRenderer

[xiaoqiang730730]

web lottie_light

• Browser and Browser Version: all mobile browser
• After Effects Version: 5.5.9

import lottie from 'lottie-web/build/player/lottie_light';

// then
const animation = lottie.loadAnimation({
    container: this.$container,
        loop: false,
    renderer: 'svg',
    path: this.lottieUrl,
});

but there are some issuse online.

ReferenceError: CanvasRenderer is not defined, at he.setParams , at he.setData , at l , at Object.e.searchAnimations , at fe , 

Find the problem in the setData function

AnimationItem.prototype.setData = (){
//...
params.animType = wrapperAttributes.getNamedItem('data-anim-type') ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') ? wrapperAttributes.getNamedItem('bm-type').value :  wrapperAttributes.getNamedItem('data-bm-renderer') ? wrapperAttributes.getNamedItem('data-bm-renderer').value : wrapperAttributes.getNamedItem('bm-renderer') ? wrapperAttributes.getNamedItem('bm-renderer').value : 'canvas';

// Here should be default  'svg' ????
}

another one：

var readyStateCheckInterval = setInterval(checkReady, 100);

Provides methods to remove automatic search capabilities. Not in my scenario.

[dranitski]

try this https://github.com/airbnb/lottie-web/issues/452#issuecomment-305984743

quote:

try adding the renderer type on the div element. data-bm-renderer='svg' it will default to canvas if you don't. I should change that for the light version, though.

[Baegus]

This problem also occurs in the lottie_svg flavour. Although, interestingly, it only happens if I use the class .lottie for my animation container. If I use anything else, it doesn't throw any errors. Setting the data-bm-renderer fixes this as well.

[artrayd]

@Baegus I changed the class name and it solved this problem!