Template compilation/AST transform fails for {{fa-icon}} (ember-font-awesome)

[balinterdi]

After installing this add-on and re-launching the ember server, I received the following error:

Template Compiler Error (TemplateCompiler) in rarwe/templates/bands.hbs
Cannot read property 'toUpperCase' of undefined

The template looks like this:

<div class="rr-sidebar">
  <ul class="rr-list">
    {{#each model as |band|}}
      <li class="rr-list-item" data-test-rr="band-list-item">
        {{#link-to "bands.band" band.id class="rr-band-link" data-test-rr="band-link"}}
          {{capitalize band.name}}
          <span class="rr-pointer">
            {{fa-icon "angle-right"}}
          </span>
        {{/link-to}}
      </li>
    {{/each}}
  </ul>
  {{!-- (...) --}}
</div>

I launched a debugging process and found the following.

The line that throws the error is this one:

// lib/ast-transform.js
function getInvocationDetails(element) {
      let tag = getTag(element);
      let invocationFirstChar = tag[0];
      let isNamedArgument = invocationFirstChar === '@';
      let isThisPath = tag.indexOf('this.') === 0;
      let [maybeLocal] = tag.split('.');

      let isLocal = locals.indexOf(maybeLocal) !== -1;
      let isUpperCase =
        invocationFirstChar === invocationFirstChar.toUpperCase() &&
        invocationFirstChar !== invocationFirstChar.toLowerCase();
     // (...)
}

For some reason, the value of tag becomes an empty string for {{fa-icon "angle-right"}} even though the element has a tag attribute that's equal to i. So getTag extracts the value incorrectly (as far as I can tell), tag becomes an empty string and invocationFirstChar undefined – it then blows up.

Here's a screenshot about my debugging window that shows this.

My hunch (but I might be totally wrong) is that that's because fa-icon does some AST transformation itself, so getTag doesn't work on it as it does on other elements.

[rwjblue]

My hunch (but I might be totally wrong) is that that's because fa-icon does some AST transformation itself, so getTag doesn't work on it as it does on other elements.

Precisely. Basically getTag expects to be able to find the raw/original source for a given tag in the raw template source. In this case (based on the screenshot) you can see that we are looking for an <i> element, but in the original source you shared that doesn't exist ({{fa-icon}} is transformed into <i>).

[balinterdi]

Great, thank you!