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 ?