Using mixins with Ember-cli?

Question

I have a mixin app/mixins/ui-listener.js which I'm struggling to use with Ember-CLI. I'm trying to use the mixin with the following syntax:

import ListenerMixin from './mixins/ui-listener';
export default Ember.Component.extend(ListenerMixin,{
    // class definition
}

This fails when I save it, complaining that

ENOENT, no such file or directory 'tmp/tree_merger-tmp_dest_dir-74tK3rvD.tmp/[app-name]/components/mixins/ui-listener.js'

It seems funny that the "mixins" directory is nested under the "components" directory (as Ember-CLI puts these directories at the same level) but this may just a Brocoli build step. Anyway, any help would be greatly appreciated.

Answer 1

I don't know how do you export your mixin but this should work:

in mixins/ui-listener.js:

import Ember from 'ember';

export default Ember.Mixin.create({
 //some stuff
});

in components/my-component.js:

import Ember from 'ember';
import UIListenerMixin from '../mixins/ui-listener';

export default Ember.Component.extend(UIListenerMixin, {
 // some stuff
});

Answer 2

Instead of adding ../ (or even worse ../../../) into your imports, you can go to your config/environment.js and check for the property modulePrefix. Let's say the prefix is app-client.

Then, you can import by using import UIListen from 'app-client/mixins/ui-listener'; instead. Absolute works best if you are in a "deep" subroute, etc.