Use lottie_light.js or lottie_light_min.js, error RendererClass is not a constructor or i is not a constructor

Project scenario:

Project scenario: Use the lottie-web animation plugin to render animations on the front end. The web side uses the framework vue+iview, and the mobile side uses uniapp. In order to compress the plug-in volume, lottie_light.js or lottie_light.min.js in the lottie-web project is used.

---

Problem Description

1. When using lottie_light_min.js, the front end reported an error i is not a constructor;
2. When using lottie_light.js, the front end reports an error RendererClass is not a constructor;

As shown in the figure:

the two belong to the same type of error, but when compressing the code, use i instead of RendererClass, so they can be combined and solved.

---

Cause Analysis:

Students who don't want to delve into it can skip this section and view the solution directly.

Check the source code of lottie_light.js, and find several key code snippets:
first search RendererClass, and find that the code error location is line 1740, and the nearby code blocks are:

    var animType = 'svg';

    if (params.animType) {
    
    
      animType = params.animType;
    } else if (params.renderer) {
    
    
      animType = params.renderer;
    }
    
    var RendererClass = getRenderer(animType);
    this.renderer = new RendererClass(this, params.rendererSettings);

We print this constructor and the corresponding animType before new RendererClass:

console.log(animType)
console.log(RendererClass)

It is found that when the object was instantiated the last time, the parameter canvas was passed in, and the RendererClass is undefined at this time, which is also understandable, because the reason why lottie_light.js is more streamlined is to remove the code of the canvas part.

So we look for the code defined by the getRenderer method, find the code line 1674, and construct the renderers object:

  var renderers = {
    
    };

  var registerRenderer = function registerRenderer(key, value) {
    
    
    renderers[key] = value;
  };

  function getRenderer(key) {
    
    
    return renderers[key];
  }

If undefined is returned when the canvas parameter is passed in, it means that there is a problem with the renderers object constructed by the registerRenderer method, so find out where the registerRenderer method is called, which is the method for constructing the renderers object.

Found the code 12552 lines, as follows:

  registerRenderer('svg', SVGRenderer); // Registering shape modifiers

We compared the code corresponding to lottie.js and found that the code in lottie.js is as follows:

  registerRenderer('canvas', CanvasRenderer);
  registerRenderer('html', HybridRenderer);
  registerRenderer('svg', SVGRenderer); // Registering shape modifiers

That is to say, lottie.js will not report an error because no matter what the animType parameter is, there is a corresponding method to construct the correct renderers object, but now the canvas parameter is passed in, but there is no corresponding CanvasRenderer constructor, so an error is reported.

---

solution:

Two ways:

1. Under normal circumstances, lottie_light.js should not have a canvas parameter, so let's find out where to assign canvas to the animType parameter, and find the line 1802 of the code:

 params.animType = wrapperAttributes.getNamedItem('data-anim-type') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('bm-type').value : wrapperAttributes.getNamedItem('data-bm-renderer') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('data-bm-renderer').value : wrapperAttributes.getNamedItem('bm-renderer') ? wrapperAttributes.getNamedItem('bm-renderer').value : 'canvas';

This code uses ternary judgment to judge how to assign values ​​to params.animType in various situations, and finally assigns canvas if they do not match. We will not report an error if we change the canvas to svg. as follows:

params.animType = wrapperAttributes.getNamedItem('data-anim-type') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('bm-type').value : wrapperAttributes.getNamedItem('data-bm-renderer') // eslint-disable-line no-nested-ternary
    ? wrapperAttributes.getNamedItem('data-bm-renderer').value : wrapperAttributes.getNamedItem('bm-renderer') ? wrapperAttributes.getNamedItem('bm-renderer').value : 'svg';

2. As mentioned above, line 12552 of the code, there should be three methods of constructing renderers under normal circumstances, but lottie_light. Just use the constructor of svg, so the 12552 lines of code are changed to:

registerRenderer('canvas', SVGRenderer) //这里只能使用SVGRenderer
registerRenderer('svg', SVGRenderer)

I don't know which of the above two modification methods will have a greater impact, because I don't understand the author's intention to set params.animType as the default canvas. If the renderer parameter is not set when using lottie, the default is to render as svg Yes, I didn't find any canvas-related elements on the page, so what is the canvas rendering here?

The first solution I'm currently using. The modification method of lottie_light_min.js code is the same.

To modify lottie_light_min.js, you can simply search for "bm-renderer", and change the canvas behind the last one to svg or an empty string