'Calling static method from different class doesn't work without using default

I've just finished a lengthy debugging session and while I solved the issue, I have no idea why my solution is necessary.

I have a file Update.js that looks like this:

class Update {

  static doThisAfterClick = (event) => {
    console.log("First button clicked!");
  }

  static doThisWhenCalled = (name, age) => {
    console.log("My name is " + name + " and my age is " + age);
  }
}

export default Update;

In Edit.js I import the module:

let Update = require('./Update');

class Edit {

  static fancyEventHandler = (event) => {
    Update.doThisWhenCalled("Peter", 42);
  }  

}
export default Edit;

and later, in app.js I add a few Event handlers:

import Edit from "./Edit";
import Update from "./Update";

firstButton.addEventListener('click', Update.doThisAfterClick);

secondButton.addEventListener('click', Edit.fancyEventHandler); 

Now the crazy part: Clicking firstButton logged First button clicked! as expected, but clicking secondButton gave an error: Uncaught TypeError: Update.doThisWhenCalled is not a function..

I actually tried to debug this by inserting

let x = Update.doThisWhenCalled;
debugger;

into fancyEventHandler() and saw that x was undefined.

Through some sheer luck I saw that I could use

Update.default.doThisWhenCalled("Peter", 42);

instead and this resolved the issue. No idea why.

What is wrong with calling the static method directly? And what is this "default" property?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source