Ember Component Heads-Up

Just a heads-up for anyone developing their own custom Ember components…

In the most recent version of Ember, it throws a fit if you use a HTML tag name (meaning the text inside a tag like “p” (because of the paragraph tag <p>) or “i” because of the italics tag <i>) as a loop variable inside a component.

For example:

Bad Code

{{#each model.participants as |p|}}
{{p.name}}
{{/each}}

Good Code

{{#each model.participants as |participant|}}
{{participant.name}}
{{/each}}

If you get blank pages with a weird error like Uncaught TypeError: Cannot read property 'nextSibling' of null showing on the browser console, this may be your problem. I believe I’ve fixed all the instances of this in the main Ares code, so you should only have to worry about it if making your own components.