Assertion failed helper when I use custom yields in my application

Question

I'm using Ember v2.5.1.

I'm tryng this solution for my necessity to use two custom yields in same component:

How can I yield multiple pieces of content into an ember.js component template?

This is my code:

// component 
{{#father-component as |f|}}
  {{#f.left-content}} 
    This is a content
  {{/f.left-content}}
  {{#f.right-content}}
    This is a another content
  {{/f.right-content}}
{{/father-component}}

// father-component
<div class="left">
  {{yield (hash left-content = (component "foo-content"))}}
</div>
<div class="right">
  {{yield (hash right-content = (component "foo-content"))}}
</div>

// foo-content 
{{yield}}

In https://ember-twiddle.com/ this works nicelly, but in my localhost this dosn't works and return this error

Assertion Failed: A helper named 'f.right-content' could not be found

Some help?

I work with app exporting the components, and the path js and hbs separetly.

Edit

When I add {{log f}} in parent component this happens.

I'd double check your templates to make sure there's no typo. The fact that this works in the twiddle is an indication that it's probably a simple error. Maybe copy paste the twiddle templates / component files into your local project just to be safe. — stevenelberger
Well.. I'm using ember +v2.5, I tried the two comments but still happened the same error =( Assertion Failed: A helper named 'f.rightContent' could not be found — MarceloBoni
@MarceloBoni try logging f in the parent component template block: {{log "f is: " f}} — stevenelberger

jelhan jelhan · Accepted Answer · 2019-08-21T11:10:10

There is an issue in ember repo discussing the trick you are using for multiple yields. Robert Jackson (@rwjblue), who is a member of the ember's core team, said in a comment that this technique only worked due to a bug that has been fixed in Ember 3.6. I haven't double checked but I would guess that the bug was added after 2.5.1, which you are using. The Ember Twiddle seems to support only versions in which this bug was alive.

TL;DR: If you want to use that approach you need to upgrade to a version that has this bug included. But I would strongly advise not to do so cause it's not supported and won't work with Ember 3.6+.

It's to sad that Yieldable named blocks RFC isn't implemented yet. You could track the status in the related tracking issue. As far as I know there is also no polyfill available (yet).

Assertion failed helper when I use custom yields in my application

Edit

1 Answers