Cannot resolve property "[missing {{token}} value] in Custom module

[#1]

Hi, I found this post here:

https://community.hubspot.com/t5/CMS-Development/Cannot-resolve-property-quot-missing-token-value-qu...

but it didn't really help me with the issue.

I have a carousel module which draws in data from a hubdb table. This works, but once I try to query for a specific category (dropdown in the hubdb), I get the error:

Cannot resolve property "[missing {{token}} value]

with no explanation on what the error actually is.

I had a chat with support and they were a bit stumped as well so I've come here looking for answers.

    <ul> 
      {% for row in hubdb_table_rows(<tableid>, "&category="~module.category) %}
        <li class="carousel-item">
          
        </li>
      {% endfor %}
    </ul>

The Category variable is set to 1, 2, 3, 4 etc which corresponds to the select options in the hubdb column. If I change the module.category to just a number, it works and lets me publish.

I can preview the module and it all works, but it refuses to let me publish stating the error mentioned above. 

Any help on this will be greatly appreciated.

[#2]

So I noticed something really strange.

If I create a table field and do:

{% for row in hubdb_table_rows(module.table, "&category="~value) %}

instead of 

{% for row in hubdb_table_rows(<table id>, "&category="~value) %}

it works. This is strange as both lines of code are identical when parsed. I tried replacing value with just a number before and it worked fine, which leads me to believe this might be an error in hubspot's parser?

[#3]

So I came accross this same issue when setting the size of an icon using a "field variable" vs a fixed size.  The error was 

Cannot resolve property "[missing {{token}} value]

I was able to resolve the issue by setting a default value of the variable. Default Value Documentation

So, this is what the code ended up looking like for me.

<span style="fill:{{ module.icon_color.color }}; height: {{ module.icon_size }}px; margin: 0px;">{% icon name="{{ module.icon.name }}" set="fontawesome-5" style="solid" format="svg" width="{{ module.icon_size|default('24') }}" height="{{ module.icon_size|default('24') }}" %}</span>

For unknown reasons I have to set the height of the span in addition to the icon size or the icon will not center properly vertically using flex css.

[#4]

That's because anything inline would auto adjust to the height of the container if using flexbox. You can see the effects if you set a background colour on your <a> or <span> and use flexbox to vertically align.