After Ext JS 6 is built, "c is not a constructor return new c (a [0])" appears.

After Ext JS 6 is built, "c is not a constructor return new c (a [0])" appears.
Overview

After packaging Ext JS 6 applications, the following errors may occur from time to time:

Because it is an error after compression, debugging is impossible, so this error will make the novice helpless, do not know what is going on.

Error cause

The main cause of this error is that the class to be created is not included in the package, or the class name is incorrect. A typical error I encountered is that Ext. MessageBox is used in requires instead of Ext. window. MessageBox.

Solution

Although it is known that the error is caused by the class name, it is difficult to know the problem of requires in that file. Therefore, it is difficult to solve this problem, but it is mainly patient, it can still be solved.

This error occurs in the getInstantiator method in the ClassManager. js file under the application ext \ packages \ core \ src \ class directory. The Code is as follows:

getInstantiator: function(length) {    var instantiators = this.instantiators,        instantiator,        i,        args;    instantiator = instantiators[length];    if (!instantiator) {        i = length;        args = [];        for (i = 0; i < length; i++) {            args.push('a[' + i + ']');        }        instantiator = instantiators[length] = new Function('c', 'a', 'return new c(' + args.join(',') + ')');        //
  
           instantiator.name = "Ext.create" + length;        //
      }    return instantiator;},

The error code is automatically generated by the "instantiator =" code (line 1 of the file. The main function of this Code is to create a new class instance and return the instance. When the class does not exist or the class name is incorrect, an error occurs because the class instance cannot be created.

The problem has been found, but the problem cannot be solved here, because it is difficult to find the class in the function that has an error, because the class name passed to the class when the class is called may be an empty class name, you need to query it when calling this method.

By searching getInstantiator in the ClassManager. js file, you will find that this method is called in the create method. The Code is as follows:

create: function () {    var name = arguments[0],        nameType = typeof name,        args = arraySlice.call(arguments, 1),        cls;    if (nameType === 'function') {        cls = name;    } else {        if (nameType !== 'string' && args.length === 0) {            args = [name];            if (!(name = name.xclass)) {                name = args[0].xtype;                if (name) {                    name = 'widget.' + name;                }            }        }        //
  
           if (typeof name !== 'string' || name.length < 1) {            throw new Error("[Ext.create] Invalid class name or alias '" + name +                            "' specified, must be a non-empty string");        }        //
          name = Manager.resolveName(name);        cls = Manager.get(name);    }    // Still not existing at this point, try to load it via synchronous mode as the last resort    if (!cls) {        //
  
           //
   
            !isNonBrowser &&        //
           Ext.log.warn("[Ext.Loader] Synchronously loading '" + name + "'; consider adding " +             "Ext.require('" + name + "') above Ext.onReady");        //
          Ext.syncRequire(name);        cls = Manager.get(name);    }    //
  
       if (!cls) {        throw new Error("[Ext.create] Unrecognized class name / alias: " + name);    }    if (typeof cls !== 'function') {        throw new Error("[Ext.create] Singleton '" + name + "' cannot be instantiated.");    }    //
      return Manager.getInstantiator(args.length)(cls, args);},

Note that in the last sentence, we can see that the getInstantiator method is called and two parameters are passed. The first parameter indicates that the class name or class itself is known according to the code above, generally, you can add "console. log (cls) "to know that the class has a problem.

In special cases, when cls is empty, you do not know where the error is. At this time, you need to add the debugger statement before the return statement. When calling this method, you can check it in the browser debugging status. In fact, this is a very annoying process, because the class creation process will call this method, so this requires patience until the error occurs. In addition, this process may need to be repeated once, because the error is generated after the debugger, and you need to record when the error is generated, which is very important.

When an error occurs, you can view the stack information in the browser debugging tool when the debugger enters the debugging status, to identify the errors caused by the method called by that class, so that the errors are generated in that class. Once you know that the error is in that class, it is easy to do it. You can easily know that there is a problem with the exclusion method.

After modifying the code in the preceding steps, you must build the code and debug it again.

Due to this error, it is difficult to restore it at the moment, and stack debugging cannot be shown in images. I am sorry, if necessary, add group 391747779 for consultation.

BTY: it seems that this error has been cleared in the latest Sencha CMD version.