Ember Dummy App Hook/Event Error

1

I’m using Ember CLI 1.13 and I’m attempting to create a router mixin in an addon that binds to the willTransition hook, but the issue I’m encountering is not limited to this event.

At this point the mixin looks like such:

import Ember from 'ember';

export default Ember.Mixin.create({
    genericFunction: function(transition) {
        console.log('--- generic function ---');
    }.on('willTransition')
});

When attempting to run the dummy app utilising the mixin, I get the following error:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).on is not a function

When including and using the addon in a separate application, there are no errors and everything functions as expected. There are no warnings, errors, anything else to hint towards any issues with its use in a full application.

The environment config of the dummy app and the separate application are identical, so I’ve ruled out environment config as a potential issue.

I’m not sure whether or not this is just broken functionality in Ember or whether I’m required to take some additional steps to make the dummy app behave as you’d expect it to when using hooks/events.

Any help would be greatly appreciated.

Thanks!

2

I answered on stack overflow (in addition to your answer). javascript - Ember CLI Hook/Event Error - Stack Overflow

3

@jthoburn Could you explain (or point me to) how the use of const is working there?

4

The pattern involve is called destructuring. It lets you pull apart an object by names and use only the pieces you need.

In this case, I’m future proofing the code by designating which parts of Ember were needed for the module, instead of using those pieces directly off of the Ember namespace. That way, in the near future when Ember allows you to import only the parts of ember you need, it becomes trivial to refactor a single const at the top of the file to the necessary import statements.

5
6

Thanks. I knew about ES6 const, and could (more or less) see what it was doing there, but had never come across that usage. I’ve seen the term “destructuring” before but had never looked into it further. ES6 is yummy.

1 Like