Ember component not found

Question

I want to make a component to wrap the events from the HTML5 drag & drop API. This is the first component I made in Ember so bear with me. We pre-compile the templates into Templates.js and Components.js. We are using HTMLBars for the templates. I've looked at the official Ember docs and some tutorials on Ember components but still it says:

Uncaught Error: Assertion Failed: A helper named 'dropzone' could not be found

This is the Javascript code for the component in JS/Components/dropzone.js:

App.DropzoneComponent = Ember.Component.extend({
    classNames: ['dropzone'],
    classNameBindings: ['dragClass'],
    dragClass: 'deactivated',
    type: null,

    dragLeave(event) {
        if (get(this, 'type') != null) {
            event.preventDefault();
            set(this, 'dragClass', 'deactivated');
        }
    },

    dragOver(event) {
        if (get(this, 'type') != null) {
            event.preventDefault();
            set(this, 'dragClass', 'activated');
        }
    },

    drop(event) {
        if (get(this, 'type') != null) {
            var data = event.dataTransfer.getData('text/data');
            this.sendAction('dropped', type, data);

            set(this, 'dragClass', 'deactivated');
        }
    }
});

This is the Handlebars/Components/dropzone.hbs component template:

{{yield}}

It's very simple because it should only wrap some other html elements. And send for the dropped action on the controller when a file or item has been drop within it's zone.

This is how the template compiler compiled the Handlebars/Components/dropzone.hbs template:

Ember.TEMPLATES["components/dropzone"] = Ember.HTMLBars.template((function () {
  return {
    meta: {
      "revision": "[email protected]+4eb55108",
      "loc": {
        "source": null,
        "start": {
          "line": 1,
          "column": 0
        },
        "end": {
          "line": 1,
          "column": 9
        }
      }
    },
    arity: 0,
    cachedFragment: null,
    hasRendered: false,
    buildFragment: function buildFragment(dom) {
      var el0 = dom.createDocumentFragment();
      var el1 = dom.createComment("");
      dom.appendChild(el0, el1);
      return el0;
    },
    buildRenderNodes: function buildRenderNodes(dom, fragment, contextualElement) {
      var morphs = new Array(1);
      morphs[0] = dom.createMorphAt(fragment,0,0,contextualElement);
      dom.insertBoundary(fragment, 0);
      dom.insertBoundary(fragment, null);
      return morphs;
    },
    statements: [
      ["content","yield",["loc",[null,[1,0],[1,9]]]]
    ],
    locals: [],
    templates: []
  };
}()));

This is how I implemented the component in the main template:

{{#dropzone type="cover"}}
        <img title="Cover picture" alt="Cover picture" {{bind-attr src=data.cover}} class="cover-picture" />
{{/dropzone}}

From the things I read in the Ember docs and tutorials I Googled everything should be in order.

Answer 1

This is a follow up to my comment above. According to EmberJS documentation it states:

Note: Components must have at least one dash in their name. So blog-post is an acceptable name, so is audio-player-controls, but post is not

Reference: Defining Components