Uncaught (in promise) TypeError: Class constructor Class cannot be invoked without 'new'

1

I’m getting the following error in the console of the browser, when trying to access my route “login”:

Uncaught (in promise) TypeError: Class constructor Class cannot be invoked without 'new'
at login.js:15
at Array.reduce (<anonymous>)
at _applyDecoratedDescriptor (login.js:15)
at Module.callback (login.js:31)
at Module.exports (loader.js:106)
at requireModule (loader.js:27)
at Class._extractDefaultExport (index.js:463)
at Class.resolveOther (index.js:123)
at Class.resolve (index.js:186)
at resolve (index.js:1223)

This is the code of my route:

import Route from '@ember/routing/route';
import inject from '@ember/service';

export default class LoginRoute extends Route {
  @inject session;

  // eslint-disable-next-line no-unused-vars
  beforeModel(transition) {
    this.session.prohibitAuthentication('index');
  }
}

Controller:

import Controller from '@ember/controller';
import inject from '@ember/service';
import action from '@ember/object';
import ENV from 'Project/config/environment';

export default class LoginController extends Controller {
  @inject session;

  @action
  async authenticate() {
    try {
      this.session.authenticate('authenticator:cookie');
    } catch(error) {
      console.log(error.error || error);
      window.location.url = ENV.SERVER_URL;
    }

    if(this.session.isAuthenticated) {
      console.log("AUTHENTICATED!! FINALLY!");
      //this.transitionToRoute('index');
    }
  }
}

As I’m also using ember-simple-auth for authentication, here the code my custom authenticator:

import Base from 'ember-simple-auth/authenticators/base'
import ENV from 'Project/config/environment';
import RSVP from 'rsvp';

export default class CookieAuthenticator extends Base {
  loginUrl = ENV.SERVER_URL;

  // eslint-disable-next-line no-unused-vars
  restore(data) {
    return RSVP.resolve();
  }

  // eslint-disable-next-line no-unused-vars
  authenticate(options) {
    return fetch(ENV.SERVER_URL + "authState", {credentials: "include"})
      .then(resp => resp.text())
      .then(text => {
        if(text === "true") {
          return Promise.resolve.bind(Promise);
        } else {
          return Promise.reject.bind(Promise);
        }
      })
      .catch(error => {
        console.log(error.error || error);
      });
  }

  // eslint-disable-next-line no-unused-vars
  invalidate(data) {
    return fetch(ENV.SERVER_URL + "logout", { credentials: "include" });
  }
}
2

Same error here extending BsButton component inside a custom addon.

// my-custom-button.js
import BsButton from 'ember-bootstrap/components/bs-button';

export default BsButton.extend({
  type: 'success',
  size: 'xs',
  defaultText: 'Guardar',
  pendingText: 'Guardando...'
});

And using it in the dummy app of my addon:

{{my-custom-button onClick=(action 'submit') }}

Error: Class constructor Button cannot be invoked without 'new'

3

The newest version of ember-bootstrap is using native class syntax for bs-button. If you’re on a new enough version of Ember you should change your component to native class syntax, e.g.:

export default class MyCustomButton extends BsButton {
  type = 'success';
  size =  'xs';
  defaultText = 'Guardar';
  pendingText = 'Guardando...';
}

If you’re not on new enough Ember (3.15 according to ember-bootstrap docs, but maybe 3.16, you probably want to be using Octane) then try downgrading bootstrap to < 4.0.0 as it looks like that’s when the breaking changes were introduced