Error 0 Critical glue error when adding extra tile list item to tile list advanced usage example

[impo]

So for my app I'm following the Advanced Usage example of Tile List from the View Components Guide, but I'm getting a weird error.

If I copy the .css over and change the .gui stuff to fit my app like so:

<svg id="Trainers" class="holder">
    <defs>
      <symbol id="my-tile-item" href="#tile-list-item" focusable="false"
              pointer-events="none" system-events="all">
        <text id="text" />
        <rect id="tile-divider-bottom" class="tile-divider-bottom" />
        <rect id="touch-me" pointer-events="all" x="0" y="0" width="100%"
              height="100%-2" opacity="0" />
      </symbol>
    </defs>
    <use id="my-list" href="#tile-list">
      <var id="separator-height-bottom" value="2" />
      <use href="#my-tile-item" class="tile-list-item">
        <image href="images/trainers/1.png" x="11" y="0" width="43" height="43"/>
        <image href="images/trainers/1p.png" x="50" y="6" width="40" height="30"/>
        <text class="left" x="90" y="35">Caterina</text>
      </use>
      <use href="#my-tile-item" class="tile-list-item">
        <image href="images/trainers/2.png" x="11" y="0" width="43" height="43"/>
        <image href="images/trainers/2p.png" x="50" y="6" width="40" height="30"/>
        <text class="left" x="90" y="35">Antonio</text>
      </use>
      <use href="#my-tile-item" class="tile-list-item">
        <image href="images/trainers/3.png" x="11" y="0" width="43" height="43"/>
        <image href="images/trainers/3p.png" x="50" y="6" width="40" height="30"/>
        <text class="left" x="90" y="35">Magnus</text>
      </use>
      <use href="#my-tile-item" class="tile-list-item">
        <image href="images/trainers/4.png" x="11" y="0" width="43" height="43"/>
        <image href="images/trainers/4p.png" x="50" y="6" width="40" height="30"/>
        <text class="left" x="90" y="35">William</text>
      </use>
      <use href="#my-tile-item" class="tile-list-item">
        <image href="images/trainers/5.png" x="11" y="0" width="43" height="43"/>
        <image href="images/trainers/5p.png" x="50" y="6" width="40" height="30"/>
        <text class="left" x="90" y="35">Chris</text>
      </use>
    </use>
  </svg>

It works fine in this case, but when I try to add extra tile items I get a:

Error 0: Critical Glue Error

Is there something in the guide that dictates how many list items can be available? How can increase that so I can have more?

I saw another post regarding this error that said it could be because the images don't have id's. Could that be the case? If so, why would 5 with id's be fine, but then 6 with id's is not?

With more than 5 tile list items

With only 5 tile list items

 Thanks for any help!

[JonFitbit]

I would take a look at the new Virtual Tile List example, that might suit you better. 

https://dev.fitbit.com/build/guides/user-interface/components/views/#virtual-tile-list

[Arafeandur]

I've also gotten bitten by this error with tile lists. It usually turns out to be a missing id.

Here's my checklist:

1. The tile list itself needs an id.
2. Each tile list item needs an id.
3. Elements embedded in the tile list items (examples: images, text) need ids.
4. If you are selecting elements to update via document, make sure you're calling document.getElementById, not getElementbyId or getElementByID.

Sometimes, with a short tile list, you can get away with a few missing ids - especially if you aren't selecting them by id via the accessor from document.