button card templates fail to load randomly

[andyblac]

Checklist

• [x ] I updated the card to the latest version available
• [x ] I cleared the cache of my browser

Describe the bug
I get the following at random times, it takes several refreshes or HA restart to fix the error

It only shows on button templates that are not in use, in the above screen shot there is 5 sensor butttons, 2 in use, 3 not, the error only shows only show on ones not in use.

the browser console shows the following.

[Error] anonymous@
_evalTemplate@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:9393
@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:12392
forEach@[native code]
_buildStyleGeneric@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:12357
_getIconHtml@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:519:161
_gridHtml@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:499:544
_cardHtml@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:479:32
render@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:425:6933
update@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:1:19879
performUpdate@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:1:16767
@https://homeassistant.local:8123/hacsfiles/button-card/button-card.js:1:16426
	render (button-card.js:425:6967)
	update (button-card.js:1:19880)
	performUpdate (button-card.js:1:16768)
	(anonymous function) (button-card.js:1:16427)
[Error] Unhandled Promise Rejection: AbortError: The operation was aborted.
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (light-entity-card.js.map, line 0)

light-entity-card v6.1.0 is installed

Version of the card
Version: 3.5.0

To Reproduce
This is the configuration I used:

  styles:
    custom_fields:
      s1: &card_andyblac_room_sensor_1_icon_styling
        - position: "absolute"
        - left: "4%"
        - bottom: "44%"
        - width: "14%"
        - height: "14%"

  custom_fields:
    s1:
      card:
        type: "custom:button-card"
        template: >
          [[[
            let templates = [ 'card_andyblac_room_sensor_1_icon' ];
            if (variables?.sensor_1?.templates?.length) {
              templates.push(...variables.sensor_1.templates);
            }
            return templates;
          ]]]
        variables: "[[[ return variables?.sensor_1; ]]]"
        state:
          - operator: "template"
            value: "[[[ return !variables.sensor_1; ]]]"
            styles:
              card:
                - display: "none"
        entity: "[[[ return variables?.sensor_1?.entity_id; ]]]"

card_andyblac_room_sensor_1_icon:
  tap_action:
    action: "more-info"
  size: "15px"
  show_icon: true
  show_name: false
  styles:
    icon:
      - width: "90%"
      - height: "90%"
      - line-height: "0"
      - color: "[[[ return variables.ulm_card_room_sensor_color ? 'rgba(var(--color-'+variables.ulm_card_room_sensor_color+'),0.4)' : 'rgba(var(--color-theme),0.2)'; ]]]"
      # - color: "rgba(var(--color-theme),0.2)"
    card:
      - background: "none"
      - box-shadow: "none"
      - padding: "0px"
  state:
    - styles:
        icon:
          - color: "[[[ return variables.ulm_card_room_sensor_color ? 'rgba(var(--color-'+variables.ulm_card_room_sensor_color+'),1)' : 'rgba(var(--color-theme),0.7)'; ]]]"
          # - color: "rgba(var(--color-theme),0.7)"
      id:  "on"
      value: "[[[ return (entity?.state == '0' || entity?.state == 'off' || entity?.state == 'closed' || entity?.state == 'disarmed') ? '' : entity?.state; ]]]"

Screenshots

Expected behavior
where the error are on scren it should just a empty space, when the sensor button is not in use, like the 2nd screenshot

Desktop (please complete the following information):

• Browser safari]
• Version 16.5.2

[andyblac]

this still occurs in beta 4.0b11, if I can get any logs or debug info please just explain what you want me to do.

[andyblac]

this is from safari java console

[RomRider]

Some of your templates in your custom fields are incorrect it seems. The JS console will show something like "ButtonCardJSTemplateError" with the error.

[andyblac]

if i refresh couple time the error goes away, or if i switch to a standard lovelace dashbaord and refresh then go back to this one again error is gone.

can you see any issue in my code above ?

[andyblac]

this is what i see in the console

[RomRider]

can you see any issue in my code above ?

No, as I lack context.
But again, I need the js console output of the ButtonCardJSTemplateError.

Please try with chrome as it seems safari behaves strangely with the error thrown by your templates (it says anonymous where it should report the error as stated above with ButtonCardJSTemplateError).

[andyblac]

is this what your after ?

[andyblac]

this is the line

      - color: "[[[ return variables.ulm_card_room_sensor_color ? 'rgba(var(--color-'+variables.ulm_card_room_sensor_color+'),0.4)' : 'rgba(var(--color-theme),0.2)'; ]]]"

i want to only use the color if one is defined, else use --color-theme

[RomRider]

Change any access to variables.xxxx to variables?.xxxx and it will be fixed.

[RomRider]

But i'll fix it so that variables exists even if there are none defined. It will just be an empty object, currently it's undefined. It's cleaner also.

[andyblac]

thanks, i really appreciate the time you take to help people like me out. can I donate to you somehow ?

[github-actions]

🎉 This issue has been resolved in version 4.0.0-dev.13 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[andyblac]

both ways fix the issue, thanks again

[Mariusthvdb]

Jerome, if I may, why do we explicitly have to use the keyword variables in our templates after a declaration? I mean, if we set a variable in core Jinja we only need to use the name of the variable, without anything further.

eg:

  variables:
    id: >
      [[[ return entity.entity_id.split('.')[1]; ]]]
  entity_picture: >
    [[[ return '/local/family/' + variables.id + '.jpg'; ]]]

why not simply do:

  variables:
    id: >
      [[[ return entity.entity_id.split('.')[1]; ]]]
  entity_picture: >
    [[[ return '/local/family/' + id + '.jpg'; ]]]

?

If I am being ignorant of common JS practice, sorry, I have been wondering about this. not an issue in any way so nevermind if this is a silly question.

[andyblac]

i think variables is a simple list to store all your vars so you can use the same var name in each template, else if you only have 1 master list you could only use the var name once in the button. but could be wrong, I'm, still new to all this.

[RomRider]

why do we explicitly have to use the keyword variables

Because it's easier for me from a code perspective and avoid weird conflicts (and thus potential new unneeded questions/issues 😄 )

[github-actions]

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀