[3.1.0] Cannot read property 'fullName' of undefined

We have the following (maybe hacky?) code:

import Service from '@ember/service'
import Component from '@ember/component'
import { getOwner, setOwner } from '@ember/application'
import { Promise } from 'rsvp'

export default Service.extend
  _getRenderer: (owner) ->
    owner.lookup('renderer:-dom')

  render: (template, context) ->
    new Promise (resolve) =>
      # create a new component
      owner = getOwner(this)

      component = Component.create
        style: 'display:none;' # hide it
        layout: Ember.HTMLBars.compile(template)
        renderer: @_getRenderer(owner)
      setOwner(component, owner)

      component.setProperties(context)

      component.one 'didRender', ->
        element = @element.cloneNode(true)
        component.destroy()
        resolve(element)

      # append the component to the body to make it render
      component.append()

This used to work fine until (including) 3.0.0. 3.1.0 broke it - calling “append” leads to:

Uncaught TypeError: Cannot read property 'fullName' of undefined
    at new RootComponentDefinition (ember-glimmer.js:4485)
    at InteractiveRenderer.appendTo (ember-glimmer.js:4702)
    at Class.exports.default._emberMetal.Mixin.create._Mixin$create.appendTo (view_support.js:135)
    at Class.exports.default._emberMetal.Mixin.create._Mixin$create.append (view_support.js:139)
    at Ember.RSVP.Promise.resolve (template-to-dom.js:31)
    ...

It is blowing up because var factory = _container.FACTORY_FOR.get(component); returns undefined (for the component that we create in the code above).

I know we are using somewhat private APIs (append) but what has changed in the new Ember and how do we fix it?

Thanks for the great framework!

[rwjblue]

The error is essentially because the component you are creating and rendering is not being created through the normal owner interface (you have already worked around a similar issue when you added this._getRenderer and manually setting owner).

The quickest work around for you would be (sorry gotta use JS since my coffeescript is super bad):

export default Service.extend({
  init() {
    this._super(...arguments);
    let owner = getOwner(this);
    owner.register('component:-special-snow-flake', Component);
  }
  render(template, context) {
    // ...snip...
    let owner = getOwner(this);
    let ComponentFactory = owner.factoryFor('component:-special-snowflake');
    let component = ComponentFactory.create({
      style: 'display:none',
      layout: Ember.HTMLBars.compile(template),
    });
    // ...snip...
  }
 });

This lets you remove the manual population of renderer and owner (I believe), but the code here still seems pretty non-idiomatic and brittle to other future framework changes. I’d suggest trying to come up with a way to refactor away from this pattern…

[houfeng0923]

hi, @rwjblue , i had the same problem. thanks for your solution .

first, this source code , and can we update by adding Null check to suppress error ?

this.state = {
      name:  factory!.fullName.slice(10), //  update : factory && factory.fullName.slice(10),
      capabilities: ROOT_CAPABILITIES,
      ComponentClass: factory as Factory<any, any>,
      handle: null,
    };

although i accept to declare component in ember way , we can’t prevent the create invoked .