Ember.js error "Cannot read property 'container' of undefined" when using Liquid Fire

I'm a beginner to front-end development and trying to utilize Ember.js for my project. I stumbled upon a great talk by Edward Faulkner about Liquid Fire at EmberConf 2015. It looked incredibly easy to apply and so I decided to give it a try.

My app is using Ember and Ember-Data Canary via ember-cli 0.2.0.

The structure of the app is somewhat like this:

application.hbs
  \users
     \user
        work.hbs
        profile.hbs
        ...
     user.hbs

And the part of the router.js file that's responsible for this is:

this.resource('users', function (){
    this.resource('users.user', { path: '/:user_id' }, function () {
        this.route('work');
        this.route('profile');
        ...
    });
});

After I installed the addon with npm install --save-dev liquid-fire, I replaced {{outlet}} in my user.hbs file with {{liquid-outlet}} and added a transitions.js file with some simple transition data:

export default function () {
  this.transition(
    this.toRoute('users.user'),
    this.use('fade')
  );
}

But as soon as I navigate to the user page, I get a javascript error:

Uncaught TypeError: Cannot read property 'container' of undefined

Which originates in a liquid-outlet.js file, on line 15:

var View = this.container.lookupFactory("view:liquid-outlet");

I have no idea what I am doing wrong. It seems like there's something with my {{liquid-outlet}} being placed in the wrong place or something, but I've tried moving it elsewhere, with no luck. As soon as I navigate to a template that has {{liquid-outlet}} in it, I get the same error. Please help.

Thank you, Oleg

This issue has been fixed in liquid fire's master branch. You can get a working build for now by pulling from git with:

npm install ef4/liquid-fire --save-dev

The next release will of course also include the fix.

Check this github issue thread for updates: https://github.com/ef4/liquid-fire/issues/190