Creating charts in emblemjs with SVG

I am trying to create multiple charts using svg using the "each" idiom I found on the emblem website. However, it returns the error:

throw peg$buildException(null, peg$maxFailExpected, peg$maxFailPos);
  ^
SyntaxError: Expected _4BeginStatement or end of input but "\uEFEF" found.

I'm not sure why it throws this error, since I know that student.courses does have an array of course objects in it and there is no error if I just print all of their names in an "each" loop... If anybody knows the reason please help me out

div.student.page
h1 align="center" = student.name

each student.courses as |course|
  %svg class="chart" width="420" height="150" aria-labelledby="title desc" role="img"
      %title id="" A bar chart showing information
      %desc id="" 4 apples; 8 bananas; 15 kiwis; 16 oranges; 23 lemons
      %g class="bar"
        %rect width="40" height="19"
        %text x="45" y="9.5" dy=".35em" 4 apples

      %g class="bar"
        %rect width="80" height="19" y="20"
        %text x="85" y="28" dy=".35em" 8 bananas

      %g class="bar"
        %rect width="150" height="19" y="40"
        %text x="150" y="48" dy=".35em" 15 kiwis

      %g class="bar"
        %rect width="160" height="19" y="60"
        %text x="161" y="68" dy=".35em" 16 oranges

      %g class="bar"
        %rect width="230" height="19" y="80"
        %text x="235" y="88" dy=".35em" 23 lemons