fireCustomEvent is undefined

Question

I'm getting error saying Uncaught TypeError: Cannot read properties of undefined (reading 'fireCustomEvent'). Please help how to resolve this as I'm making use of Oracle JET to write this javascript code

define([], () => {
  'use strict';

  //var eventHelper;
  var idleTime = 0;

  class PageModule {
    constructor(context) {
      this.eventHelper = context.getEventHelper();

      // Increment the idle time counter every minute.
      this.idleInterval = setInterval(this.timerIncrement, 5000); // 10 second
    }

    timerIncrement() {
      console.log(idleTime);
      idleTime = idleTime + 1;
      if (idleTime > 0) {
        console.log(this.eventHelper);
        this.eventHelper.fireCustomEvent('openDialog', {});
      }
    }

  }

  // Zero the idle timer on mouse movement.
  $(this).mousemove(function (e) { idleTime = 0; });
  $(this).keypress(function (e) { idleTime = 0; });

  return PageModule;
});

`eventHelper` and `fireCustomEvent` are not standard JavaScript but added by JET. Your specific error can be reworded as "The `fireCustomEvent` method/property does not exist in the `eventHelper` class/object". I would investigate getEventHelper() and make sure it actually creates the eventHelper. — Blizzardengle, Jan 24 '23 at 17:12
This article might help as well. His code looks different from how you structured yours: https://medium.com/oracle-jet/vb-custom-events-6df875fb4fef — Blizzardengle, Jan 24 '23 at 17:13
Glad to hear it! Don't forget if you find a working solution you can post an answer to your own question to help other people who have this issue in the future. — Blizzardengle, Jan 25 '23 at 06:16

Arunkumar V · Answer 1 · 2023-01-27T09:29:31.070

This issue may be related to Referencing "this" inside setInterval/setTimeout. With the current code, after transpile, the PageModule will be

var PageModule = /** @class */ (function () {
    function PageModule(context) {
        //.....
        this.idleInterval = setInterval(this.timerIncrement, 5000); // 10 second
    }
    PageModule.prototype.timerIncrement = function () { 
        if (idleTime > 0) {
            console.log(this.eventHelper);
            this.eventHelper.fireCustomEvent('openDialog', {});
        }
    };
    return PageModule;
}());

this is not referring to PageModule but Window object of browser inside the timerIncrement function and because of that the eventHelper is undefined.

Solution 1: Use an arrow function.

const timerIncrement = () => {
    //....
    if (idleTime > 0) {
        console.log(this.eventHelper);
        this.eventHelper.fireCustomEvent('openDialog', {});
    }
}

Solution 2: Pass this to timerIncrement as given below and use as self inside the timerIncrement function.

constructor(context) {
    this.idleInterval = setInterval(this.timerIncrement, 5000, this); 
}

timerIncrement(self) {
    //....
    if (idleTime > 0) {
        console.log(self.eventHelper);
        self.eventHelper.fireCustomEvent('openDialog', {});
    }
}

fireCustomEvent is undefined

1 Answers1