Handlebars Runtime Component Error

Using Yeoman Ember Generator , I tried to create a new block component, e.g:

//directory: template/components/test-component.hbs

Test-component's content: <div>{{yield}}</div>

And to be called in application template:

//directory: template/application.hbs

<div id="application_content">
    {{#test-component}}yield content{{/test-component}}
</div>

The weird thing is when its compiled using grunt and handlebars runtime, it produce an error says:

Uncaught #<error>

But when I tried to not use handlebars runtime and instead move all templates to be inline in index.html, it works fine.

So does Handlebars runtime does not support components? Or are there any other way to fix this?

You’re not supposed to compile with handlebars runtime… What did you use to compile?

I compile it with grunt serve. I think in that process they use handlebar runtime. Here, I attached the link for the precompiled version: http://jsfiddle.net/dekaa/wyQ84/, and the inline version: http://jsfiddle.net/dekaa/LcSSE/

Anyone can help me with this?

What version of handlebars are you using?

I’ve tried to used handlebars v1.2.1 and v1.3.0, and the result still the same. I’ve attached the demo link above.