Dashboard: Sometimes showing error "Custom element doesn't exist: hui-vertical-stack-card"

peterjuras commented 1 year ago

Checklist:

[X] I updated to the latest version available
[X] I cleared the cache of my browser
Version: v0.1.3
Last working release (if known): /
Browser and Operating System: Multiple - Chrome, Windows & Mac, Android WebView

I believe the issue is not related to a specific browser.

Description of problem:

every now and then when loading my home assistant dashboard I get two stacks displayed which both display the error:

Custom element doesn't exist: hui-vertical-stack-card.

See the screenshot below. Reloading the page or switching to a different tab like settings and back resolves the issue. This error appears about every 10-20% of times when I open the dashboard and I can't reproduce it consistently. Recently the error is appearing more often.

I've installed bootstrap-grid-card via HACS and see it listed in the dashboard resources UI:

Full dashboard configuration:

title: ''
views:
  - panel: true
    badges: []
    cards:
      - type: custom:bootstrap-grid-card
        cards:
          - type: row
            cards:
              - type: vertical-stack
                class: col-8
                cards:
                  - type: weather-forecast
                    entity: weather.rutzheim_hourly
                    show_forecast: true
                    number_of_forecasts: '5'
                    theme: Animated Weather Card
                    name: ' '
                  - type: vertical-stack
                    cards:
                      - type: custom:homekit-card
                        entities:
                          - title: Lights
                            entities:
                              - entity: light.living_room
                                tap_action:
                                  action: call-service
                                  service: script.toggle_living_room_lights
                              - entity: light.hallway
                              - entity: light.bathroom
                              - entity: light.kitchen
                              - entity: light.bedroom
                          - title: Devices
                            entities:
                              - entity: switch.rutzheim_desktop
                              - entity: switch.living_room_tv
                              - entity: remote.xbox_series_x_remote
                              - entity: switch.bedroom_tv
                          - title: Motion sensors
                            entities:
                              - entity: input_boolean.motion_sensing_hallway
                              - entity: input_boolean.motion_sensing_bathroom
                              - entity: input_boolean.motion_sensing_kitchen
                              - entity: input_boolean.motion_sensing_bedroom
                        style: |
                          :host {
                            --tile-background: rgba(10, 10, 10, 0.22);
                            --tile-border-radius: 12px;
                            --tile-width: 100px;
                            --tile-height: 100px;
                            --tile-on-background: var(--card-background-color);

                            --tile-name-text-color: var(--disabled-text-color);
                            --tile-on-name-text-color: var(--primary-text-color);

                            --tile-state-text-color: var(--disabled-text-color);
                            --tile-on-state-text-color: var(--paper-item-icon-active-color);

                            --tile-state-changed-text-color: var(--primary-text-color);
                            --tile-unavailable-state-text-color: rgba(255, 0, 0, 1);

                            --tile-value-text-color: var(--primary-text-color);

                            --tile-icon-color: var(--disabled-text-color);
                            --tile-on-icon-color: var(--paper-item-icon-active-color);

                            --tile-width-mobile: 90px;
                            --tile-height-mobile: 90px;

                            --tile-icon-size: 30px;
                            --tile-padding-top: 0
                            --tile-image-radius: 0;
                            }
              - type: vertical-stack
                class: col
                cards:
                  - type: entity
                    entity: sensor.time_formatted
                    name: Rutzheim München
                  - type: conditional
                    conditions:
                      - entity: media_player.badezimmer_speaker
                        state_not: idle
                      - entity: media_player.badezimmer_speaker
                        state_not: unavailable
                      - entity: media_player.badezimmer_speaker
                        state_not: unknown
                      - entity: media_player.badezimmer_speaker
                        state_not: 'off'
                    card:
                      type: media-control
                      entity: media_player.badezimmer_speaker
                  - type: conditional
                    conditions:
                      - entity: media_player.kuche_speaker
                        state_not: 'off'
                      - entity: media_player.kuche_speaker
                        state_not: unavailable
                      - entity: media_player.kuche_speaker
                        state_not: unknown
                      - entity: media_player.kuche_speaker
                        state_not: idle
                    card:
                      type: media-control
                      entity: media_player.kuche_speaker
                  - type: conditional
                    conditions:
                      - entity: media_player.schlafzimmer_speaker
                        state_not: 'off'
                      - entity: media_player.schlafzimmer_speaker
                        state_not: unavailable
                      - entity: media_player.schlafzimmer_speaker
                        state_not: unknown
                      - entity: media_player.schlafzimmer_speaker
                        state_not: idle
                    card:
                      type: media-control
                      entity: media_player.schlafzimmer_speaker
                  - type: conditional
                    conditions:
                      - entity: media_player.wohnzimmer_speaker
                        state_not: 'off'
                      - entity: media_player.wohnzimmer_speaker
                        state_not: unavailable
                      - entity: media_player.wohnzimmer_speaker
                        state_not: unknown
                      - entity: media_player.wohnzimmer_speaker
                        state_not: idle
                    card:
                      type: media-control
                      entity: media_player.wohnzimmer_speaker
                  - type: conditional
                    conditions:
                      - entity: media_player.rutzcast_wohnzimmer
                        state_not: 'off'
                      - entity: media_player.rutzcast_wohnzimmer
                        state_not: unavailable
                      - entity: media_player.rutzcast_wohnzimmer
                        state_not: unknown
                      - entity: media_player.rutzcast_wohnzimmer
                        state_not: idle
                    card:
                      type: media-control
                      entity: media_player.rutzcast_wohnzimmer
                  - type: conditional
                    conditions:
                      - entity: media_player.rutzcast_schlafzimmer
                        state_not: 'off'
                      - entity: media_player.rutzcast_schlafzimmer
                        state_not: unavailable
                      - entity: media_player.rutzcast_schlafzimmer
                        state_not: unknown
                      - entity: media_player.rutzcast_schlafzimmer
                        state_not: idle
                    card:
                      type: media-control
                      entity: media_player.rutzcast_schlafzimmer
                  - type: plant-status
                    entity: plant.monstera
                  - type: entities
                    entities:
                      - entity: input_select.spotify_user_selection
                    show_header_toggle: false
                  - type: conditional
                    conditions:
                      - entity: input_select.spotify_user_selection
                        state: Peter
                    card:
                      type: custom:spotify-card
                      limit: 10
                      playlist_type: default
                      default_device: Wohnzimmer speaker
                      display_style: list
                      hide_top_header: true
                      hide_playback_controls: true
                      hide_currently_playing: true
                      hide_connect_devices: true
                      account: default
                      spotify_entity: media_player.spotify_peter_juras
                  - type: conditional
                    conditions:
                      - entity: input_select.spotify_user_selection
                        state: Sandra
                    card:
                      type: custom:spotify-card
                      playlist_type: default
                      default_device: Wohnzimmer speaker
                      display_style: list
                      hide_top_header: true
                      hide_playback_controls: true
                      hide_currently_playing: true
                      hide_connect_devices: true
                      limit: 10
                      account: sandra
                      spotify_entity: media_player.spotify_sandra_juras

peterjuras commented 1 year ago

I previously opened this in the homeassistant/frontend repository but they mentioned this would be due to a custom card. Bootstrap grid card is the only custom card I'm using.

ivanpavlina commented 1 year ago

I'm experiencing the same issue, all cards having vertical-stack and col-{x} are throwing Custom element doesn't exist: hui-vertical-stack-card on first load of the page (or complete refresh of the page). Modifying yaml from another pc and clicking button on Your dashboard was updated. Refresh to see changed? fixes the issue until next refresh.

ownbee commented 1 year ago

I can't reproduce the vertical-stack error it in my layouts, although I don't have the custom cards you have. I have tried putting 3-4 vertical stacks and some random built-in cards inside them, left it for an hour then reloaded the page ~50 times. I also tried clearing the cache in between some tries.

I have never any issue similar to this but I don't have any vertical-stack inside my layouts only horizontal-stack. I have a tablet/RPI running Chrome showing a pretty complicated layout 24/7 (with horizontal-stack, not vertical-stack) and have never seen an error. Might be something unique to vertical-stack or combination with some custom cards inside it.

I will add a vertical-stack to the layout my tablet is showing and see if I also get the issue over time.

ownbee / bootstrap-grid-card

Dashboard: Sometimes showing error "Custom element doesn't exist: hui-vertical-stack-card" #9