Custom:button-card variables in Raw Configuration Editor not working

Configuration Frontend
1

Hi all

I’m battling to get this to work. I get “Cannot read properties of null (reading ‘config’)” in my card.
This is in my raw file right on top, below title.

button_card_templates:
  my_global_fan_style:
    variables:
      var_off: silver
      var_icon_off: white
      var_border_on: lime
      var_icon_on: lime
    styles:
      card:
        - border-radius: 5px
        - border-color: |
            [[[
              if (states[variables.var_entity].state == 'on') return variables.var_border_on;
              return;
            ]]]      
        - background: >-
            linear-gradient(135deg, rgba(50,50,50,1.0) 0%, rgba(136, 172, 184)
            100%)
        - box-shadow: |
            [[[ 
              if (states[variables.var_entity].state == 'on') return `3px 2px 10px ${variables.var_border_on}`;
              return `0px 5px 10px rgba(0, 0, 0, 0.9)`;
            ]]]
        - height: 50px
        - width: 55px
      icon:
        - color: |
            [[[
              if (states[variables.var_entity].state == 'on') return variables.var_icon_on;
              return variables.var_icon_off;
            ]]]      
        - height: 35px
      name:
        - color: var(--text-primary-color)
        - font-size: 16px
        - text-align: center
      label:
        - font-size: 18px
        - text-align: center
        - color: |
            [[[
              if (states[variables.var_entity].state == 'on') return variables.var_icon_on;
              return variables.var_off;
            ]]]

And this id the button card:

type: custom:button-card
template: my_global_fan_style
icon: mdi:fan-speed-3
name: Kitchen Fan High Too
entity: switch.kitchen_fan_speed_high
tap_action: none
show_icon: true
show_name: true
show_label: false
variables:
  var_entity: switch.kitchen_fan_speed_high
2

One of your javascript parts return a null value.
Could be the first one where it just say return;

3

Thanks for the quick response. Unfortunately that did not solve the problem. I removed the all the styling and I still get the same error.

4

This seems to be specific to the custom:button-card?
Other cards do not give an error.
Does anyone know why?

5

I copied your code, and it works in my setup. It seems the issue might lie with your button-card installation - try reinstalling it.

By the way, it is better to replace states[variables.var_entity].state (and similar ones) with states[variables.var_entity]?.state; this prevents the code from crashing if the entity is missing or the identifier is incorrect.

6

Thank you slimak for the feedback and advise.

How would you go about reinstalling it? I have tried the following and it’s still not working:

  1. Deleted it via HACS and Restarted HA. (Buttons were still visible and active in HA)?
  2. Reinstalled it by Downloading it in HACS. Restarted HA. Still no change.
  3. I then downloaded the files in Github and copied it over to button-card-master folder, located in the www directory. Restarted HA and still no change.
  4. I cannot find button-card.js on Github? This is located in my www/community folder. So I did not replace that.

Any suggestions?

7

The problem disappeared when I restarted my Computer. Hours and Hours of trying to debug LOL!
Thank you all for your responses.