0

I've stumbled upon a behavior I cannot understand. Could someone, more proficient with JS, have a quick glance at it.

I apologize for posting screenshots instead of setting up a working example here, but I hope it should be enough for an expert to quickly recognize what's reason is.

  • I have a JS class in an ES6 module
  • I pass a function to the class' constructor
  • I attach an event handler to an HTMLElement and in this handler I expect to have this function to be accessible.

It's accessible if I don't use ES6 modules, I've checked. So the reason must be related to the ES6 modules' scope also I suspect the shadow DOM may be related.

So at this point, line 8 the notifyController function is definedpicture of a browser's console window, function is defined.

But when the event handler is run, it's undefined.picture of a browser's console window, function is not defined

How come?

Thank you in advance.

Solved:

The reason turned out to be that the View constructor was called twice. Many thanks to @Bergi who suggested that this was a possible reason.

One time manually with expected parameters, in a module file. The other time automatically w/o expected parameters, because the html contained a custom element to which this class was assigned.

Put short: the reason was inappropriate use of custom elements

I'd prefer to leave the question here, in case anyone else has a similar problem

d.k
  • 4,234
  • 2
  • 26
  • 38
  • So when is it saying it is undefined? when it hits the break point?? – epascarello Feb 22 '22 at 18:03
  • @epascarello in the second screenshot, on the break point line there is a popup window. Yes, when it hits the breakboint in screenshot 2 – d.k Feb 22 '22 at 18:04
  • @epascarello line 9 to be exact – d.k Feb 22 '22 at 18:05
  • 1
    Is it possible that the constructor is run multiple times (with different arguments)? You're right, this certainly should not happen. – Bergi Feb 22 '22 at 18:23
  • What else is different when you're using ES6 modules? Could it be related to transpilation or something? – Bergi Feb 22 '22 at 18:25
  • @Bergi it's unlikely, very unlikely, since it's just ~20 lines of codes totally. I'm about to simplify it even further, hopefully until I find the reason – d.k Feb 22 '22 at 18:26
  • 1
    If it's that short, can you add a [mcve] that allows us the reproduce this? How/where is the constructor called? – Bergi Feb 22 '22 at 18:27
  • 1
    @Bergi Thank you very much. I guess you've found it. I have some problems with a class being instantiated twice – d.k Feb 22 '22 at 18:33
  • But I can provide a link to a temporary webserver, since it's still something hard to understand for me – d.k Feb 22 '22 at 18:35
  • Are you transpiling arrow functions? If so, then this is just your debugger not being able to undo those transformations so it has no way to show the `this` correctly. – loganfsmyth Feb 22 '22 at 18:37
  • @loganfsmyth no, I am not. For some reason the View module is run twice. – d.k Feb 22 '22 at 18:53
  • 1
    @Bergi sorry, I won't be able to provide a link. Too complicated network configuration. But thank you very much, w/o you I would be stuck – d.k Feb 22 '22 at 18:57

0 Answers0