Error: Attempting to invoke a class as a function is not allowed - ECMAScript 6 - AngularJS 1.x

Question

Error: Attempting to invoke a class as a function is not allowed - ECMAScript 6 - AngularJS 1.x

Currently working on an Angular 1.x application, utilizing ES6, an Angular Linter, and Babel for transpiling. Encountering an error message: "TypeError: Cannot call a class as a function" in the console, even though the HTML loads correctly.

TypeError: Cannot call a class as a function
at _classCallCheck (bundle.js:97664)
at Object.loginNotifyService (bundle.js:97670)
at Object.invoke (bundle.js:23052)
at Object.enforcedReturnValue [as $get] (bundle.js:22885)
at Object.invoke (bundle.js:23052)
at bundle.js:22844
at getService (bundle.js:22993)
at injectionArgs (bundle.js:23018)
at Object.invoke (bundle.js:23044)
at $controllerInit (bundle.js:29012) "<div ui-view="" class="ng-scope">"

From my analysis, it appears that the syntax is correct. My assumption is that Babel is converting to ES5, specifically this snippet:

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

Below is the source JavaScript code:

    'use strict';

class loginNotifyService {
    constructor(notify) {
        this.loginNotifyService = notify;
    }

    info(message, config) {
        // Method details...
    }

    warn(message, config) {
        // Method details...
    }

    error(message, config) {
        // Method details...
    }

    success(message, config) {
        // Method details...
    }

    notify(config) {
        // Method details...
    }

    closeAll() {
        // Method details...
    }
}

// loginNotifyService.$inject = ['notify'];
/* @ngInject */
export default loginNotifyService;

And here is the Controller associated with the loginNotifyService:

'use strict';

class loginController {
    constructor($state, loginNotifyService, loginService) {
        // Constructor details...
    }

    login() {
        // Method details...
    }

    showErrors(error) {
        // Method details...
    }
}

// loginController.$inject = ['$state', 'loginNotifyService', 'loginService'];
/* @ngInject */
export default loginController;

If you require further clarification or additional information, please let me know. Thank you for any guidance offered.

javascript angularjs authentication notifications babeljs

Answer 1

Answer №1

After encountering an issue, I successfully resolved it by transitioning the factory to a service. Initially, the factory setting was in place due to a linting rule enforced by this specific linter:

https://github.com/Gillespie59/eslint-plugin-angular

The rule that influenced this change can be found here:

https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-service-method.md
(Disabling this rule facilitated the transition from factory to service)

The code structure of the loginNotifyService necessitated being a service for proper functionality (as currently written). To gain more clarity on the distinction between the two, I found this post particularly helpful:

AngularJS : Factory and Service?

EXAMPLE:

angular
.module('commonModule', [           
    uiRouter,
    cgNotify,
    ngAnimate, 
    ngMaterial,
    ngMessages, 
    ngSanitize,
    ngAria,
    'navRoute',
    'mdTheme',
])

// ALL OF THE SERVICES BELOW WERE PREVIOUSLY FACTORIES.
// CHANGING "loginNotifyService" TO A SERVICE INSTEAD,
// FIXED THE "TypeError: Cannot call a class a function" ERROR!

.service('authService', authService)
.value('loginConfigService', loginConfigService)
.service('loginNotifyService', loginNotifyService)
.service('loginService', loginService)
.service('resetPassService', resetPassService)
.component('login', loginComponent)
.component('resetPass', resetPassComponent);

A shoutout to @Rhoden for the valuable response and insights!

Answer 2

After encountering an issue, I successfully resolved it by transitioning the factory to a service. Initially, the factory setting was in place due to a linting rule enforced by this specific linter:

https://github.com/Gillespie59/eslint-plugin-angular

The rule that influenced this change can be found here:

https://github.com/Gillespie59/eslint-plugin-angular/blob/master/docs/rules/no-service-method.md
(Disabling this rule facilitated the transition from factory to service)

The code structure of the loginNotifyService necessitated being a service for proper functionality (as currently written). To gain more clarity on the distinction between the two, I found this post particularly helpful:

AngularJS : Factory and Service?

EXAMPLE:

angular
.module('commonModule', [           
    uiRouter,
    cgNotify,
    ngAnimate, 
    ngMaterial,
    ngMessages, 
    ngSanitize,
    ngAria,
    'navRoute',
    'mdTheme',
])

// ALL OF THE SERVICES BELOW WERE PREVIOUSLY FACTORIES.
// CHANGING "loginNotifyService" TO A SERVICE INSTEAD,
// FIXED THE "TypeError: Cannot call a class a function" ERROR!

.service('authService', authService)
.value('loginConfigService', loginConfigService)
.service('loginNotifyService', loginNotifyService)
.service('loginService', loginService)
.service('resetPassService', resetPassService)
.component('login', loginComponent)
.component('resetPass', resetPassComponent);

A shoutout to @Rhoden for the valuable response and insights!

Answer 3

Answer №2

It appears there is a misunderstanding error here, where AngularJS does not instantiate a transpiled service class unless it recognizes it as an ES6 class (as evidenced by the invocation code below).

Classes compiled by Babel are actually functions that act like classes, so Babel includes checks (such as the function _classCallCheck) to ensure that a class cannot be called as a function (they should only be invoked with the new keyword).

AngularJS uses this code in its invoke function:

function isClass(func) {
  // Support: IE 9-11 only
  // IE 9-11 do not support classes and leak with the code below.
  if (msie || typeof func !== 'function') {
    return false;
  }
  var result = func.$$ngIsClass;
  if (!isBoolean(result)) {
    result = func.$$ngIsClass = /^class\b/.test(stringifyFn(func));
  }
  return result;
}

This method fails to identify Babel compiled classes.

As a result, this validation also fails:

if (!isClass(fn)) {
    // http://jsperf.com/angularjs-invoke-apply-vs-switch
    // #5388
     return fn.apply(self, args);
} else {
    args.unshift(null);
    return new (Function.prototype.bind.apply(fn, args))();
}

This leads to a "TypeError: Cannot call a class as a function" error.

Edit: Upon further review of the code, you may be able to declare a class like this to resolve the issue:

class Foo {
  $$ngIsClass = true;
  // or
  static get $$ngIsClass = true;
}

By doing this, the isClass function will return true, and the class will be called using the new keyword. (I would appreciate it if you could test this and confirm its effectiveness).

Answer 4

It appears there is a misunderstanding error here, where AngularJS does not instantiate a transpiled service class unless it recognizes it as an ES6 class (as evidenced by the invocation code below).

Classes compiled by Babel are actually functions that act like classes, so Babel includes checks (such as the function _classCallCheck) to ensure that a class cannot be called as a function (they should only be invoked with the new keyword).

AngularJS uses this code in its invoke function:

function isClass(func) {
  // Support: IE 9-11 only
  // IE 9-11 do not support classes and leak with the code below.
  if (msie || typeof func !== 'function') {
    return false;
  }
  var result = func.$$ngIsClass;
  if (!isBoolean(result)) {
    result = func.$$ngIsClass = /^class\b/.test(stringifyFn(func));
  }
  return result;
}

This method fails to identify Babel compiled classes.

As a result, this validation also fails:

if (!isClass(fn)) {
    // http://jsperf.com/angularjs-invoke-apply-vs-switch
    // #5388
     return fn.apply(self, args);
} else {
    args.unshift(null);
    return new (Function.prototype.bind.apply(fn, args))();
}

This leads to a "TypeError: Cannot call a class as a function" error.

Edit: Upon further review of the code, you may be able to declare a class like this to resolve the issue:

class Foo {
  $$ngIsClass = true;
  // or
  static get $$ngIsClass = true;
}

By doing this, the isClass function will return true, and the class will be called using the new keyword. (I would appreciate it if you could test this and confirm its effectiveness).

Error: Attempting to invoke a class as a function is not allowed - ECMAScript 6 - AngularJS 1.x

Answer №1

Answer №2

Similar questions

Is there a way for me to delete or replace 'element.style'?

Using AngularJS to handle Access-Control-Origin Header when making HTTP requests

Tips for handling the RETURN value in an AJAX call to a server-side script

Adapting imports in Typescript for seamless npm distribution

Issue with Tablesort functionality in Internet Explorer

ERROR: Issue with headless environment in BROWSER SYNC

Using an array with the useState React hook may lead to some render calls being skipped

Is it possible to inject a $scope parameter into $state.href function?

Simplified method of connecting dynamic components without needing to remember functions in jQuery

Is there a way to activate the autoplay feature for this?

Why is the appsecret_proof invalid?

Issue with regex replacement behaving differently in Node compared to console

Testing an Angular factory that relies on dependencies using JasmineJS

Exploring dynamic techniques for verifying username and passphrase on an SNMP server using pysnmp

Vitest encountered an issue fetching a local file

Troubleshooting AngularJS application by Manipulating List Items

Tips on resetting the position of a div after filtering out N other divs

What is the best way to create a dynamic icon using React and TypeScript?

Utilizing Smoke.js within a PHP environment

Issues with Ajax POST not functioning correctly in Internet Explorer