Ember component not found

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 and 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 code 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": "Ember@1.13.5+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: []
  };
}()));

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