Can't instantiate UI5 classes due to "TypeError: ... is not a constructor"

Question

I'm trying to refactor the legacy UI5-codebase and would like to use reusable dialogs.

My steps:

1. I've downloaded the Walkthrough Step 19: Reuse Dialogs sample
2. I've added HelloDialog.js into project's ./controller/ folder
3. I've added HelloDialog.fragment.xml into project's ./view/ folder
4. I've adjusted a namespace inside of HelloDialog.js and HelloDialog.fragment.xml from sap.ui.demo.walkthrough.controller.HelloDialog to webapp.controller.HelloDialog
5. I've added a button for the HelloDialog to the view:

<Button id = "helloDialogButton"
        icon = "sap-icon://world"
        text = "Show Popup"
        press = ".onOpenDialog" />

6. I've added to App.controller.js:

onOpenDialog() {
    this.getOwnerComponent().openHelloDialog();
},

7. I've added "./controller/HelloDialog" to Component.js and initialize the object:

init(...args) {
    UIComponent.prototype.init.apply(this, args);
    this.getRouter().initialize();
    this._helloDialog = new HelloDialog(this.getRootControl());
}

8. I've added hooks to the exit and openHelloDialog events to Component.js:

exit() {
    this._helloDialog.destroy();
    delete this._helloDialog;
},

openHelloDialog() {
    this._helloDialog.open();
},

Now, I run the project and get the a blank page, in DevTools console I see the following error:

Failed to load component for container rootComponentContainer. Reason: TypeError: HelloDialog is not a constructor

The only difference I can spot is that I'm using arrow functions in my code, but can it be that arrow functions break UI5? Perhaps, some issues with the object context.

Answer 1

Constructors of UI5 classes should avoid arrow functions:

// constructor: () => {}
constructor: function() { // e.g. in HelloDialog.js
  // Avoid arrow functions in UI5 class constructors
},

The same applies to constructors in VanillaJS. Calling new on arrow functions is not supported!

---

Also please note that arrow functions do not create their own context (this) either. Their context in that case is based on the scope the arrow function is defined within which is often times window. Hence, methods should not be defined with arrow expression if the function body relies on this.