Addon not working

Question

I have an Ember Addon which I've put up at Github here:

https://github.com/lifegadget/ember-dictionary

It passes all its unit tests and in a non addon form it is working fine in one of my projects but I'd like to lift it out the project and be able to use it as an addon. Still I'm clearly missing a step in how to expose the two Ember classes. This can be seen in the dummy app which tries to create a very simple model like so:

import DS from 'ember-data';
import DictionaryModel from 'ember-dictionary';

export default DictionaryModel.extend({
  foo: DS.attr('string')
});

Then when the route (tests/dummy/routes/index.js) tries to use the model I get the following error:

Error while processing route: index Cannot read property 'extend' of undefined TypeError: Cannot read property 'extend' of undefined

To me this feels like a ES6/namespacing issue but I'm not sure how to overcome it. I did try the following more explicit import statement:

import DictionaryModel from 'ember-dictionary/models/dictionary-model';

but the same error occurred. Any help would be greatly appreciated.

I have updated the repo to use a Mixin strategy instead of overloading Model. I have updated the link to the repo to point to the correct commit that this question was based on. — ken
I have solved some aspects of this namespacing problems but not all. I will post my partial answer below. — ken

ken ken · Accepted Answer · 2014-12-15T07:15:51

I have bumped into enough walls that I think I can at least partially answer my question but some questions still remain so I won't mark this answer correct with the hope that others may post a more complete answer.

The first distinction I realised I hadn't been making clear enough for myself was whether to target the Ember App's namespace or to target an independent namespace for the addon. Classes defined in the app directory of the addon will be available to any application which uses the Addon in it's own namespace. In contrast, classes in the addon directory will be namespaced to the addon's namespace.

I have seen a lot people define classes in the addon's app directory and then proxy it through to the addon directory with something like:

// addon/mixins/dictionary.js
import DictionaryMixin from 'ember-dictionary/mixins/dictionary';
export default DictionaryMixin;

Although I've seen this I am still having problems getting these external namespaced classes to work. I think there may be another step needed to add a index.js entry point for the addon and then export these classes there. In any event, I'll leave this area alone as I decided to get the internal namespaced solution working first.

My next problem in the internal namespaced solution was centered around the dummy application that gets built as part of the addon creation process. I wanted this dummy application to have a model which would use the Mixin I created in the addon and I thought I'd be able to refer to it as:

import DictionaryMixin from 'ember-dictionary/mixins/dictionary';

but this couldn't be resolved by the Dummy test application so I had to resort to:

import DictionaryMixin from '../mixins/dictionary';

Which I guess is appropriate considering that my "external namespaced solution" isn't working yet ... falling back to the internally namespaced solution was required.

Addon not working

1 Answers