Import mixin into add-on in Ember cause "Uncaught Error: Could not find module"

I am doing the following in my addon/component/my-component.js:

import Ember from 'ember';
import layout from '../templates/components/my-component';
import myMxixin from '../mixins/my-mixin';

export default Ember.Component.extend(myMixin,{
    layout
});

However doing this gave me Uncaught Error: Could not find module foo/mixins/my-mixin imported from foo/components/my-component

The path of my-mixin.js is app/mixins/my-mixin.

How do I import my mixin, given the above structure? Thank you.