ember must call super method from component error

Question

i just extending my ember component with my custom mixins class but unfortunately my log said an error

    Assertion Failed: You must call `this._super(...arguments);` when overriding `init` on a framework object. Please update <cahyowhy-mini-blog@component:post-item::ember395> to call `this._super(...arguments);` from `init`.
Error

but in my component(post-item) i've been declared my init method

import Ember from 'ember';
import BaseController from '../controllers/base-controller';
import Likepost from '../models/likepost';

export default Ember.Component.extend(BaseController, {
  posts: "",
  applyLayout(){
    Ember.$(document).ready(function () {
      let $grid = Ember.$('#post-container').imagesLoaded(function () {
        $grid.masonry({
          itemSelector: '.post-item',
          percentPosition: true,
          columnWidth: '.post-item',
        });
      });
    });
  },
  init(){
    this._super(...arguments);
  },
..... more code

and this is my basecontroller class

import Ember from 'ember';

export default Ember.Mixin.create({
  init(){
    //this._super(...arguments); //nek ra dipanggil neng component post item ra keno :(
    let afterRenderExist = this.afterRender !== undefined && typeof this.afterRender === "function";
    if (this.applicationRoute.documentReady && afterRenderExist) {
      Ember.run.schedule('afterRender', this, function () {
        this.afterRender();
      });
    } else if (afterRenderExist) {
      this.applicationRoute.on('onDocumentReady', this, function () {
        this.afterRender();
      });
    }
  },

but when i try to uncomment this syntax this._super(...arguments); in my base controller. the error is gone...

can anyone solve this :( ...

score 1 · Answer 1 · answered Jul 28 '17 at 02:34

The function init() always exists and is defined in Ember (even if you didn't write it yourself). init() will do several things behind the scenes to make sure everything in your Ember application is working properly.

By extending your own version of init(), it's important that you preserve that key functionality that init() does before you write whatever you need to write.

That is why you're supposed to call this._super(...arguments);. Otherwise you would essentially be breaking Ember because you're overwriting some important functionality.

So basically, you actually need this._super(...arguments);, at the beginning of your init() function in order for everything to work properly. That is why commenting it out is giving you an error. If you uncomment it out then everything will be just fine.

score 1 · Accepted Answer · answered Jul 28 '17 at 05:25

Idea is you need to call init which is defined in Ember.Component if you don't then you will get an assertion error.

Ember.Component
   basecontroller (this._super is referring to Ember.Component)
      post-item (this._super is referring to basecontroller)

Simply to reach parent class which is Ember.Component. we need to this._super in all the places. Always calling this._super(...arguments) for init method is Good Practice.

ember must call super method from component error

2 Answers2