[Bug]: Can't access entity.state or entity.attributes

[GeertGK]

🐛 Current Behavior

I'm trying to install some conditional fields, but I need a trigger for that. I wanted to use a button-card for that — preferably the custom one. However, I cannot seem to access entity.state or entity.attributes.

I have tried removing all the repos from HACS and re-adding them, but that didn't solve the problem. Also, my browser console gets flooded with errors.

---

🧾 Console Output

ButtonCardJSTemplateError: Cannot read properties of undefined (reading 'state')
    at Ti.eval (eval at _evalTemplate (button-card.js?hacstag=146194325412:434:2161), <anonymous>:4:21)
    at Ti._evalTemplate (button-card.js?hacstag=146194325412:434:2257)
    at Ti._getTemplateOrValue (button-card.js?hacstag=146194325412:434:2877)
    at button-card.js?hacstag=146194325412:442:430
    at Array.forEach (<anonymous>)
    at Ti._buildCustomFields (button-card.js?hacstag=146194325412:442:292)
    at Ti._gridHtml (button-card.js?hacstag=146194325412:524:25)
    at Ti._buttonContent (button-card.js?hacstag=146194325412:506:454)
    at Ti._cardHtml (button-card.js?hacstag=146194325412:486:18)
    at Ti.render (button-card.js?hacstag=146194325412:426:19509)

---

❌ Template Render Error

ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 
'var state = entity.state;
 if(state == "on")
  return `<ha-icon icon="mdi:toggle-switch" style="co...'

---

🧪 Troubleshooting So Far

Since I couldn't get it working, I downloaded a different config from somewhere (thinking it might be my mistake), but apparently it wasn’t — I still get the same issue.

---

📦 YAML Config Example

type: custom:button-card
entity: input_boolean.tutorial
name: Light
show_icon: true
icon: mdi:ceiling-light
tap_action:
  action: toggle
state:
  - value: 'off'
    styles:
      card:
        - background: black
      icon:
        - color: white
      name:
        - color: white
      custom_fields:
        state:
          - color: white
styles:
  card:
    - padding: 20px 20px 11px 20px
  grid:
    - grid-template-areas: '"i i" "n n" "state icon"'
    - grid-template-columns: 1fr 1fr
    - grid-template-rows: 1fr min-content min-content
  name:
    - justify-self: start
    - font-size: 14px
    - color: black
    - opacity: '0.7'
    - padding: 2px 0px
  icon:
    - width: 24px
    - color: black
  img_cell:
    - justify-self: start
    - width: 24px
    - height: 24px
    - margin-left: '-1px'
    - padding-bottom: 18px
  custom_fields:
    icon:
      - justify-self: end
      - margin-top: '-9px'
    state:
      - justify-self: start
      - margin-top: '-9px'
      - font-size: 16px
      - font-weight: 500
custom_fields:
  icon: |
    [[[
      var state = entity.state;
      if(state == "on")
        return `<ha-icon icon="mdi:toggle-switch" style="color: #59CE8F; width:50px; height:40px;"></ha-icon>`;
      else 
        return `<ha-icon icon="mdi:toggle-switch-off" style="color: var(--contrast1); width:50px; height:40px;"></ha-icon>`;
    ]]]
  state: |
    [[[
      var state = entity.state;
      if(state == "on")
        return `On`;
      else 
        return `Off`;
    ]]]

Expected Behavior

No JS error when I fethc the entity.state

Steps To Reproduce

No response

Environment

- OS:
- Node:
- Version:
- Hassio:

Anything else?

No response