Unable to add new card in GUI

Configuration Frontend
1

Hey everyone. This has been an ongoing issue for me and it’s been posted about before and it’s never been addressed.

I can’t figure out why after updates my GUI doesn’t allow me to add cards or even edit existing cards. This seems to happen every other update for me that I’ve now started double checking everything is ok before updating… and then rechecking. If the result is the attached picture then I’ve been rolling back the update and trying again. It just now happened again today when I went to core 2024.10.4. This also happens across all devices including phones. Everything appears fine in the logs and configs.

I’m hosting my HA through ProxMox and so far my troubleshooting has been everything from reloading the browser, clearing cache, force cache clearing, restarting, rebooting, full shutdown, reboot ProxMox, full shutdown ProxMox, etc. The only thing that gets me back is simply restoring the update and trying again.

I’m sure I’m missing something and it’s driving me crazy. Thoughts?

image
image1250×714 49 KB

2

Any errors being thrown in the browser console?

Also please try safe mode if you’re using some custom cards, they can break things.

3

Well darn… I should opened up developer console when playing around. I’ve since restored to get my everything back to normal.

Thanks for the suggestion. I’ll definitely remember it for next time.

4

So I played around and got it do the same issue again by restoring updates. Looking at my browser console there seems to be an error in: compute-unused-entities.ts

Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘entity’)
at r (compute-unused-entities.ts:34:14)
at compute-unused-entities.ts:53:38
at Array.forEach ()
at n (compute-unused-entities.ts:53:18)
at compute-unused-entities.ts:59:33
at Array.forEach ()
at n (compute-unused-entities.ts:59:15)
at compute-unused-entities.ts:68:39
at Array.forEach ()
at n (compute-unused-entities.ts:68:18)

5

Can you share the yaml of the current dashboard you’re looking at when this occurs?

6

It’s a blank Test page - but it occurs on every page that are active and working.

  - title: Test
    path: test
    visible:
      - user: xxx
      - user: xxx
    badges: []
    cards: []
7

How about the entire dashboard, and not just the one view.

I’m looking at the code and it seems like this could be caused by another card somewhere in the dashboard that has yaml formed in an unexpected way.

Can you also try creating a new blank dashboard, and adding a card there, and see if that makes a difference?

1 Like
8

Hey man, I believe you’re exactly right. I watched my console logs like a hawk and rolled back and re-updated and I started catching custom config errors for the HACS custom-template-card. I removed my yaml that utilized this and it fixed it. It was tied to my generac genmon card - which was pretty nice…

type: custom:config-template-card
variables:
  - states['sensor.genmon_version'].state
entities:
  - null
card:
  type: entities
  show_header_toggle: "off"
  style: |
    .card-header {
      padding: 0px 0px 0px 0px !important;
    }
  entities:
    - type: section
      label: ${ 'Generac Evolution - Pi 3 - Raspian - Genmon ' + vars[0] }
    - type: custom:hui-element
      card_type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:
            - type: picture
              style: |
                ha-card { 
                    --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                    --ha-card-background: "rgba(0, 0, 0, 0.0)";
                    --ha-card-box-shadow: 'none';
                }
              image: >-
                https://genstarservice.com/wp-content/uploads/2024/01/generac-generator-transparent.png
            - type: vertical-stack
              cards:
                - type: custom:button-card
                  layout: icon_name_state2nd
                  show_icon: true
                  show_state: true
                  styles:
                    grid:
                      - grid-template-columns: 50px auto
                    icon:
                      - padding: 0px 0px
                      - height: 20px
                      - width: 30px
                    card:
                      - "--ha-card-background": rgba(0, 0, 0, 0.0)
                      - "--ha-card-box-shadow": none
                    state:
                      - padding: 0px 10px
                      - justify-self: start
                      - font-family: Roboto, sans-serif
                      - font-size: 15px
                    name:
                      - padding: 0px 10px
                      - font-size: 15px
                      - justify-self: start
                      - color: var(--secondary-text-color)
                  entity: sensor.genmon_mon_uptime
                  name: Uptime
                  icon: mdi:clock-outline
                - type: horizontal-stack
                  cards:
                    - type: custom:button-card
                      layout: icon_name_state2nd
                      show_icon: true
                      show_state: true
                      styles:
                        grid:
                          - grid-template-columns: 25px auto
                        icon:
                          - padding: 0px 0px
                          - height: 30px
                          - width: 30px
                        card:
                          - "--ha-card-background": rgba(0, 0, 0, 0.0)
                          - "--ha-card-box-shadow": none
                        state:
                          - padding: 0px 10px
                          - justify-self: start
                          - font-family: Roboto, sans-serif
                          - font-size: 15px
                        name:
                          - padding: 0px 10px
                          - justify-self: start
                          - color: var(--secondary-text-color)
                      entity: sensor.genmon_mon_cpu_temperature_raw
                      name: Temp
                      icon: mdi:thermometer
                    - type: custom:button-card
                      layout: icon_name_state2nd
                      show_icon: true
                      show_state: true
                      styles:
                        grid:
                          - grid-template-columns: 25px auto
                        icon:
                          - padding: 0px 0px
                          - height: 30px
                          - width: 30px
                        card:
                          - "--ha-card-background": rgba(0, 0, 0, 0.0)
                          - "--ha-card-box-shadow": none
                        state:
                          - padding: 0px 10px
                          - justify-self: start
                          - font-family: Roboto, sans-serif
                          - font-size: 15px
                        name:
                          - padding: 0px 10px
                          - justify-self: start
                          - color: var(--secondary-text-color)
                          - font-size: 13px
                      entity: sensor.genmon_mon_load
                      name: Pi CPU
                      icon: mdi:cpu-64-bit
                - type: horizontal-stack
                  cards:
                    - type: custom:button-card
                      layout: icon_name_state2nd
                      show_icon: true
                      show_state: true
                      styles:
                        grid:
                          - grid-template-columns: 25px auto
                        icon:
                          - padding: 0px 0px
                          - height: 30px
                          - width: 30px
                        card:
                          - "--ha-card-background": rgba(0, 0, 0, 0.0)
                          - "--ha-card-box-shadow": none
                        state:
                          - padding: 0px 10px
                          - justify-self: start
                          - font-family: Roboto, sans-serif
                          - font-size: 15px
                        name:
                          - padding: 0px 10px
                          - justify-self: start
                          - color: var(--secondary-text-color)
                          - font-size: 13px
                      entity: sensor.genmon_wlan_signal_level
                      name: WiFi
                      icon: mdi:gauge
                    - type: custom:button-card
                      layout: icon_name_state2nd
                      show_icon: true
                      show_state: true
                      styles:
                        grid:
                          - grid-template-columns: 25px auto
                        icon:
                          - padding: 0px 0px
                          - height: 30px
                          - width: 30px
                        card:
                          - "--ha-card-background": rgba(0, 0, 0, 0.0)
                          - "--ha-card-box-shadow": none
                        state:
                          - padding: 0px 10px
                          - justify-self: start
                          - font-family: Roboto, sans-serif
                          - font-size: 15px
                        name:
                          - padding: 0px 10px
                          - justify-self: start
                          - color: var(--secondary-text-color)
                      entity: sensor.genmon_generator_battery_raw
                      name: Battery
                      icon: mdi:battery
        - type: horizontal-stack
          cards:
            - type: custom:canvas-gauge-card
              card_height: 100
              entity: sensor.genmon_outage_utility_voltage
              name: ""
              gauge:
                type: radial-gauge
                title: Pepco
                width: 100
                height: 100
                minValue: 0
                maxValue: 280
                startAngle: 40
                ticksAngle: 280
                valueBox: true
                units: Vac
                majorTicks:
                  - 0
                  - 28
                  - 56
                  - 84
                  - 112
                  - 140
                  - 168
                  - 196
                  - 224
                  - 252
                  - 280
                minorTicks: 10
                strokeTicks: true
                highlights:
                  - from: 0
                    to: 218
                    color: rgba(234, 51, 36, .75)
                  - from: 218
                    to: 228
                    color: rgba(255, 255, 85, .75)
                  - from: 228
                    to: 252
                    color: rgba(104, 225, 67, .75)
                  - from: 252
                    to: 262
                    color: rgba(255, 255, 85, .75)
                  - from: 262
                    to: 280
                    color: rgba(234, 51, 36, .75)
                borders: "no"
                needleType: arrow
                needleWidth: 4
                needleCircleSize: 7
                needleCircleOuter: true
                needleCircleInner: false
                animationDuration: 1500
                animationRule: linear
                valueBoxBorderRadius: 10
                colorValueBoxRect: "#222"
                colorValueBoxRectEnd: "#333"
                valueDec: 0
                valueInt: 0
            - type: custom:canvas-gauge-card
              card_height: 100
              entity: sensor.genmon_generator_frequency
              name: ""
              gauge:
                type: radial-gauge
                title: Generator
                width: 100
                height: 100
                minValue: 0
                maxValue: 70
                startAngle: 40
                ticksAngle: 280
                valueBox: true
                units: Hz
                majorTicks:
                  - 0
                  - 10
                  - 20
                  - 30
                  - 40
                  - 50
                  - 60
                  - 70
                minorTicks: 10
                strokeTicks: true
                highlights:
                  - from: 0
                    to: 57
                    color: rgba(234, 51, 36, .75)
                  - from: 57
                    to: 58.5
                    color: rgba(255, 255, 85, .75)
                  - from: 58.5
                    to: 61.5
                    color: rgba(104, 225, 67, .75)
                  - from: 61.5
                    to: 63
                    color: rgba(255, 255, 85, .75)
                  - from: 63
                    to: 70
                    color: rgba(234, 51, 36, .75)
                borders: "no"
                needleType: arrow
                needleWidth: 4
                needleCircleSize: 7
                needleCircleOuter: true
                needleCircleInner: false
                animationDuration: 1500
                animationRule: linear
                valueBoxBorderRadius: 10
                colorValueBoxRect: "#222"
                colorValueBoxRectEnd: "#333"
                valueDec: 0
                valueInt: 0
            - type: custom:canvas-gauge-card
              card_height: 100
              entity: sensor.genmon_generator_output_voltage
              name: ""
              gauge:
                type: radial-gauge
                title: Generator
                width: 100
                height: 100
                minValue: 0
                maxValue: 280
                startAngle: 40
                ticksAngle: 280
                valueBox: true
                units: Vac
                majorTicks:
                  - 0
                  - 28
                  - 56
                  - 84
                  - 112
                  - 140
                  - 168
                  - 196
                  - 224
                  - 252
                  - 280
                minorTicks: 10
                strokeTicks: true
                highlights:
                  - from: 0
                    to: 218
                    color: rgba(234, 51, 36, .75)
                  - from: 218
                    to: 228
                    color: rgba(255, 255, 85, .75)
                  - from: 228
                    to: 252
                    color: rgba(104, 225, 67, .75)
                  - from: 252
                    to: 262
                    color: rgba(255, 255, 85, .75)
                  - from: 262
                    to: 280
                    color: rgba(234, 51, 36, .75)
                borders: "no"
                needleType: arrow
                needleWidth: 4
                needleCircleSize: 7
                needleCircleOuter: true
                needleCircleInner: false
                animationDuration: 1500
                animationRule: linear
                valueBoxBorderRadius: 10
                colorValueBoxRect: "#222"
                colorValueBoxRectEnd: "#333"
                valueDec: 0
                valueInt: 0
        - type: horizontal-stack
          cards:
            - type: custom:canvas-gauge-card
              card_height: 100
              entity: sensor.genmon_generator_output_power
              name: ""
              gauge:
                type: radial-gauge
                title: Generator
                width: 100
                height: 100
                minValue: 0
                maxValue: 23000
                startAngle: 40
                ticksAngle: 280
                valueBox: true
                units: kW
                majorTicks:
                  - 0
                  - 3
                  - 6
                  - 9
                  - 12
                  - 15
                  - 18
                  - 20
                  - 23
                minorTicks: 10
                strokeTicks: true
                highlights:
                  - from: 0
                    to: 15000
                    color: rgba(104, 225, 67, .75)
                  - from: 15000
                    to: 18500
                    color: rgba(255, 255, 85, .75)
                  - from: 18500
                    to: 23000
                    color: rgba(234, 51, 36, .75)
                borders: "no"
                needleType: arrow
                needleWidth: 4
                needleCircleSize: 7
                needleCircleOuter: true
                needleCircleInner: false
                animationDuration: 1500
                animationRule: linear
                valueBoxBorderRadius: 10
                colorValueBoxRect: "#222"
                colorValueBoxRectEnd: "#333"
                valueDec: 0
                valueInt: 0
            - type: custom:canvas-gauge-card
              card_height: 100
              entity: sensor.genmon_generator_rpm
              name: ""
              gauge:
                type: radial-gauge
                title: Generator
                width: 100
                height: 100
                minValue: 0
                maxValue: 4000
                startAngle: 40
                ticksAngle: 280
                valueBox: true
                units: RPM
                majorTicks:
                  - 0
                  - ""
                  - ""
                  - ""
                  - ""
                  - 2000
                  - ""
                  - ""
                  - ""
                  - 3600
                  - 4000
                minorTicks: 3
                strokeTicks: true
                highlights:
                  - from: 0
                    to: 3500
                    color: rgba(234, 51, 36, .75)
                  - from: 3500
                    to: 3550
                    color: rgba(255, 255, 85, .75)
                  - from: 3550
                    to: 3650
                    color: rgba(104, 225, 67, .75)
                  - from: 3650
                    to: 3750
                    color: rgba(255, 255, 85, .75)
                  - from: 3750
                    to: 4000
                    color: rgba(234, 51, 36, .75)
                borders: "no"
                needleType: arrow
                needleWidth: 4
                needleCircleSize: 7
                needleCircleOuter: true
                needleCircleInner: false
                animationDuration: 1500
                animationRule: linear
                valueBoxBorderRadius: 10
                colorValueBoxRect: "#222"
                colorValueBoxRectEnd: "#333"
                valueDec: 0
                valueInt: 0
            - type: custom:canvas-gauge-card
              card_height: 100
              entity: sensor.genmon_generator_battery_raw
              name: ""
              gauge:
                type: radial-gauge
                title: Generator
                width: 100
                height: 100
                minValue: 0
                maxValue: 16
                startAngle: 40
                ticksAngle: 280
                valueBox: true
                units: Volts
                majorTicks:
                  - 1
                  - 2
                  - 3
                  - 4
                  - 5
                  - 8
                  - 10
                  - 11
                  - 13
                  - 14.2
                  - 16
                minorTicks: 5
                strokeTicks: true
                highlights:
                  - from: 0
                    to: 11.6
                    color: rgba(234, 51, 36, .75)
                  - from: 11.6
                    to: 12.6
                    color: rgba(255, 255, 85, .75)
                  - from: 12.6
                    to: 14.5
                    color: rgba(104, 225, 67, .75)
                  - from: 14.5
                    to: 14.9
                    color: rgba(255, 255, 85, .75)
                  - from: 15
                    to: 16
                    color: rgba(234, 51, 36, .75)
                borders: "no"
                needleType: arrow
                needleWidth: 4
                needleCircleSize: 7
                needleCircleOuter: true
                needleCircleInner: false
                animationDuration: 1500
                animationRule: linear
                valueBoxBorderRadius: 10
                colorValueBoxRect: "#222"
                colorValueBoxRectEnd: "#333"
                valueDec: 0
                valueInt: 0
        - type: entities
          entities:
            - entity: sensor.genmon_generator_exercise_time
              name: Exercise
              icon: mdi:clock
            - entity: sensor.genmon_generator_last_action
              name: Last Action
              icon: mdi:clipboard-edit-outline
            - entity: sensor.genmon_generator_last_alarm_log
              name: Last Alarm
              icon: mdi:alarm-bell
            - entity: sensor.genmon_outage_status
              name: Last Outage
              icon: mdi:power-plug-off
          style: |
            ha-card { 
                --paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
                --ha-card-background: "rgba(0, 0, 0, 0.0)";
                --paper-item-icon-color: 'var(--text-primary-color)';
                --ha-card-box-shadow: 'none';
            }

type or paste code here

9

Ah yeah it’s certainly this line that’s the problem:

entities:
  - null

The existing code expects entities to contain an array of strings or objects.

I can put together a quick PR to make it more robust against this kind of syntax.

Thanks for sharing, you’re not the first person I think this has happened to. :+1:

1 Like
10

Fix PR
https://github.com/home-assistant/frontend/pull/22549

1 Like