Ember component creation error in 2.10

1

When I do Ember.Component.Create() in an unit test for mixin i get this error. I was upgrading ember from 1.13 to 2.10, this test worked fine in 1.13 but in 2.10 I get this error. Looks like in 2.10 ember component init requires an app instance.

Died on test #1     at Module.callback (http://localhost:4200/assets/tests.js:250:19)
    at Module.exports (http://localhost:4200/assets/vendor.js:131:32)
    at requireModule (http://localhost:4200/assets/vendor.js:30:18)
    at TestLoader.require (http://localhost:4200/assets/test-support.js:7104:7)
    at TestLoader.loadModules (http://localhost:4200/assets/test-support.js:7096:14)
    at Function.TestLoader.load (http://localhost:4200/assets/test-support.js:7126:22)
    at http://localhost:4200/assets/test-support.js:7009:18: Cannot instantiate a component without a renderer. Please ensure that you are creating <(subclass of Ember.Component):ember210> with a proper container/registry.@ 9 ms
Source: 	
Error: Cannot instantiate a component without a renderer. Please ensure that you are creating <(subclass of Ember.Component):ember210> with a proper container/registry.
    at Class.init (http://localhost:4200/assets/vendor.js:51954:15)
    at Class.superWrapper [as init] (http://localhost:4200/assets/vendor.js:50175:22)
    at Class.init (http://localhost:4200/assets/vendor.js:50443:19)
    at Class.superWrapper (http://localhost:4200/assets/vendor.js:50175:22)
    at Class.init (http://localhost:4200/assets/vendor.js:50493:19)
    at Class.superWrapper (http://localhost:4200/assets/vendor.js:50175:22)
    at Class.exports.default._emberMetal.Mixin.create._Mixin$create.init (http://localhost:4200/assets/vendor.js:51000:17)
    at Class.superWrapper (http://localhost:4200/assets/vendor.js:50175:22)
    at Class.init (http://localhost:4200/assets/vendor.js:17472:19)
    at Class.superWrapper [as init] (http://localhost:4200/assets/vendor.js:50175:22)

Few things I have tried:

  • To startApp() in setup and destroy, similar to integration testing
  • To override init but init always requires _super() to be called
  • Tried to execute in integration testing environment where application is created
2

Perhaps take a look at this code:

https://github.com/aupac/ember-aupac-typeahead/pull/31/commits/179a8650792aa33111eb5dd8dfdad2aa6819f0d4

3

thank you the code definitely gave a lead but i am not sure where to get the renderer from. I created a new ember app and tried to fetch from there but it does not have one. I tried using unit test context but that does not have it too. Finally i did renderer: {}. This made sure that the check did not fail. Since i did not have a necessity to use rendering anywhere this fixed the issue for now. Thanks again

1 Like
4

What I did was:

var owner = Ember.getOwner(this);
var renderer = owner.lookup('renderer:-dom');

And pass this ‘renderer’ variable as renderer to Component.create. This is probably a horrible hack, but it works.

3 Likes
5

awesome, will try that too

6

Look great. But where are these codes should be written? and demo code will be wonderful . very thanks.

1 Like
7

The ideal solution here for Ember 2.12+ is to lookup the component factory and create a new component from the factory.

needs: ['component:my-component']

const MyComponent = Ember.getOwner(this).factoryFor('component:my-component');

MyComponent.create()

2 Likes
8

@steveszc - I’m not sure exactly what you mean. The code that I’m using is something like:

template = '<div></div>'

owner = Ember.getOwner(this)
component = Ember.Component.create
  layout: Ember.HTMLBars.compile(template)
  renderer: owner.lookup('renderer:-dom')
Ember.setOwner(component, owner)

component.setProperties({ foo: 1, bar: 2 })

component.append()

This code is for creating dynamic components (with dynamic layouts). I’m not sure where your code would fit here, could you please elaborate?