Bottom card issue - Githubissues

exus85 commented 3 years ago

Hi, I have an issue with sidebar card: when I refresh the page the bottom section of the sidebar doesn't appear and home assistant reports this error: .../hacsfiles/sidebar-card/sidebar-card.js:462:2818 TypeError: a.setConfig is not a function

If I keep refreshing the page it shows up sometimes (with no errors reported) but most of the times it doesn't

http://ipaddress:8123/hacsfiles/sidebar-card/sidebar-card.js:412 Ie http://ipaddress:8123/hacsfiles/sidebar-card/sidebar-card.js:412 Ie http://ipaddress:8123/hacsfiles/sidebar-card/sidebar-card.js:412 async* http://ipaddress:8123/hacsfiles/sidebar-card/sidebar-card.js:661 sidebar-card.js:462:2818

kongjudas commented 2 years ago

I have the same issue on my Lenovo Android using Chrome after upgrading to 2021.12 b1. It doesn't show at all. On my Mac, using Safari, it shows up randomly after some refreshes.

Gilles-Clemenceau commented 2 years ago

Same for me, it just appeared today.

ivo-gofilex commented 2 years ago

Same here, happens every time on HA 2021.12.1 / 0.1.8.3

wtrbuit commented 2 years ago

We are looking into the issue.

wtrbuit commented 2 years ago

@exus85, @kongjudas, @Gilles-Clemenceau and @ivo-gofilex can you provide a snippet of your bottomCard setup?

ivohulsman commented 2 years ago

Here is my bottomCard (I am ivo-gofilex, accidentally posted on the wrong account):

bottomCard:
  type: vertical-stack
  cardOptions:
    cards:
      - type: custom:battery-state-card
        entities:
          - entity: sensor.op8pro_battery_level
            name: "OP8P"
          - entity: sensor.op6_battery_level
            name: "OP6"
          - entity: sensor.liv_tablet_battery_level
            name: "Tablet Office"
  cardStyle: |
    :host {
      width: 100%;
    }

wtrbuit commented 2 years ago

What we have learned so far is that there is an issue with custom cards and with at least vertical-stack cards. Entities card does work. We will update you when we know more.

Denow commented 2 years ago

It seems to be related to a timing issue. If I open another page and then switch to the sidebar page, the bottom card is loaded. When I refresh on the sidebar page the bottom bar card does not load and gives the same error mentioned in this issue.

Gilles-Clemenceau commented 2 years ago

I have a lot of custom elements, but it was working since the last HA core update.

  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - type: custom:meteofrance-weather-card
          style: |
            ha-card {
              background: none;
              color: #fff;
              padding: 0px !important;
            }
          [...]
        - type: horizontal-stack
          style: |
            ha-card {
              background: none;
              color: #fff;              
            }
          cards:
            - type: entity
              entity: sensor.temperature_exterieure_temperature
              name: Exterieur
              style: |
                ha-card {
                  background: none;
                  padding: 0px!important;
                  margin: 0px!important;
                }
            - type: entity
              entity: sensor.temperature_salon_temperature
              name: Salon
              style: |
                ha-card {
                  background: none;
                  padding: 0px!important;
                  margin: 0px!important;
                }
            - type: entity
              entity: sensor.ipx800v4_piscine
              name: Piscine
              style: |
                ha-card {
                  background: none;
                  padding: 0px!important;
                  margin: 0px!important;
                }
        - type: custom:bar-card
          positions:
            icon: 'off'
          min: 0
          max: 5000
          animation:
            '0':
              state: 'on'
          entities:
            - entity: sensor.envoy_current_energy_consumption
              name: Consommation
            - entity: sensor.envoy_current_energy_production
              name: Production
          entity_row: true
    cardStyle: |
      :host {
        width: 100%;
        background: none;
      }

nyffchanium commented 2 years ago

What we have learned so far is that there is an issue with custom cards and with at least vertical-stack cards. Entities card does work. We will update you when we know more.

For me, entities card doesn't work either:

sidebar:
  bottomCard:
    type: entities
    entities:
      - entity: sun.sun

hui-calendar-card.ts:31 Uncaught Error: Entities must be specified
    at HTMLElement.value (hui-calendar-card.ts:31)
    at sidebar-card.js?hacstag=2418255740184:462

Not sure whether the calendar card does have anything to do it.

mvanlijden commented 2 years ago

I also have the same error in my console with initially loading the sidebard bottom card. Switching to another dashboard and back to the dashboard with the sidecard does work. In my mind this error appeared when the 0.1.8.4 update, but this could also be the december HA update.

My config:

  bottomCard:
    type: vertical-stack
    cardStyle: |
      :host {
        width: 100%;
      }
    cardOptions:
      cards:
        - type: weather-forecast
          entity: weather.openweathermap_hourly
          show_forecast: false
          name: ' '
          tap_action:
            action: navigate
            navigation_path: /lovelace-wallpanel/weer-detail
        - type: picture-entity
          camera_image: camera.buienradar
          entity: camera.buienradar
          show_state: false
          show_name: false
          camera_view: live

pafftis commented 2 years ago

Good afternoon, I have the same problem the bottom panel does not work at all. I've tried all your versions. the problem does not go away. Apparently this is due to the latest Ha update I really want you to fix it soon. ` bottomCard: type: vertical-stack cardOptions: cards:

type: custom:layout-card layout_type: custom:masonry-layout layout: width: 220 max_cols: null cards:
- type: custom:simple-weather-card entity: weather.cherepovets name: Череповец tap_action: action: navigate navigation_path: /dashboard-galaxy-tab/weather primary_info:
- wind_bearing
- humidity secondary_info:
- precipitation
- precipitation_probability backdrop: day: ' var (- primary-color) ' night: ' # 40445a '`

fammastrodaiuto commented 2 years ago

Good afternoon, I have the same problem the bottom panel does not work at all.

Version side bar: 0.1.8.4 Version HA: core-2021.12.7 Version HA Supervisor: Home Assistant OS 7.1

Code: bottomCard: type: horizontal-stack cardOptions: cards:

type: entity-filter entities:
- person.michael state_filter:
- home card: type: custom:badge-card

Please fix it as soon as possible. Thank you very much!

Djhik commented 2 years ago

Hello, I have this problem too, the display of the lower part of the sidebar is random. I am available to do tests if necessary.

Error:

sidebar-card.js?hacstag=2418255740180:18071 

       Uncaught TypeError: cardElement.setConfig is not a function
    at :8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740180:18071:33

Info:

Version HA: core-2021.12.10
Version Supervisor: supervisor-2022.01.0
Version Sidebar : 0.1.8.4

Code:

  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - type: 'horizontal-stack'
          cards:
            - type: custom:button-card
              entity: person.perso1
              triggers_update:
                ['person.perso1', 'sensor.time']
              style:
                width: 15%
              tap_action: !include views/popup/perso1.yaml
              hold_action: !include views/popup/perso1.yaml
              template: temp_person2

            - type: custom:button-card
              entity: person.perso2
              triggers_update:
                ['person.perso2', 'sensor.time']
              style:
                width: 15%
              tap_action: !include views/popup/perso2.yaml
              hold_action: !include views/popup/perso2.yaml
              template: temp_person2

        - type: 'custom:mini-media-player'
          entity: media_player.volumio
          hide:
            name: true
            power: true
            source: true
            volume: true

        - type: 'custom:mini-graph-card'
          icon: 'mdi:home-thermometer-outline'
          entities:
            - sensor.sensor_chambre_perso3

Gilles-Clemenceau commented 2 years ago

Any news about this bug ?

alinalihassan commented 2 years ago

I can confirm it's still happening on my setup too. I had two dashboard and on one of them it works properly, the other one it doesn't with the same code, just different views. And if I first go to the functional dashboard, the other one works as well until I refresh.

Desaydrone commented 2 years ago

Hello everyone,

If i write here, of course i got the same problem in the bottom part. But i realise something, when i put a card in my dashboard with the same yaml code i put in the bottom part, it works

A little exemple

Alindil commented 2 years ago

I have the same problem too

neuroverflow commented 2 years ago

It is indeed a "timer issue". Current value is 2ms, I changed it to 5000ms and it loads properly

Gilles-Clemenceau commented 2 years ago

It is indeed a "timer issue". Current value is 2ms, I changed it to 5000ms and it loads properly

Where to change this value?

flixlix commented 2 years ago

It is indeed a "timer issue". Current value is 2ms, I changed it to 5000ms and it loads properly

Where to change this value?

I couldn't find this value either

neuroverflow commented 2 years ago

Line 462 But let's be clear, this is a really ugly patch. Don't forget to delete the .js.gz file and only keep your modified sidebar-card.js as HASS always prefer to read that file first.

pqpxo commented 2 years ago

Hey there!

I attempted to amend the file with the same '5000' value but my HA went into Safe Mode.

Any certain way of making this change?

Gilles-Clemenceau commented 2 years ago

I've made the change but it's not working for me. :-/

neuroverflow commented 2 years ago

Make sure you delete the .gz file if you changed the. Js. Otherwise Hass read the Js inside the archive.

neuroverflow commented 2 years ago

Hey there!

I attempted to amend the file with the same '5000' value but my HA went into Safe Mode.

Any certain way of making this change?

You probably remove a character like the comma. Make sure your editor supports the encoding, avoid notepad ;)

pqpxo commented 2 years ago

Hey there! I attempted to amend the file with the same '5000' value but my HA went into Safe Mode. Any certain way of making this change?

You probably remove a character like the comma. Make sure your editor supports the encoding, avoid notepad ;)

False alarm! It looks like I changed something else and hadn't restarted in quite some time.

Made the correction and now the bottom card works!

Gilles-Clemenceau commented 2 years ago

Make sure you delete the .gz file if you changed the. Js. Otherwise Hass read the Js inside the archive.

Yes & I've checked in lovelace, I can see the modification & the error arrive later. Maybe I have another bug.

atika1988 commented 2 years ago

Mindenképpen törölje a .gz fájlt, ha módosította a. Js. Ellenkező esetben Hass elolvasta a J-ket az archívumban.

a .gz where can i find the file? I FOUND IT! :)

.gz has been deleted but still does not appear :(

what the problem?

ghost commented 2 years ago

I think I have a similar issue. My error in the log is:

Logger: frontend.js.latest.202202031 Source: components/system_log/init.py:190 First occurred: 13:14:48 (1 occurrences) Last logged: 13:14:48

http://dietpi:8123/hacsfiles/sidebar-card/sidebar-card.js:462:18967 TypeError: a.setConfig is not a function. (In 'a.setConfig(e)', 'a.setConfig' is undefined)

It's a custom:button that only shows after a refreshing the screen.

Happy to make this a different issue if necessary.

neuroverflow commented 2 years ago

Mindenképpen törölje a .gz fájlt, ha módosította a. Js. Ellenkező esetben Hass elolvasta a J-ket az archívumban.

a .gz where can i find the file? I FOUND IT! :)

.gz has been deleted but still does not appear :(

what the problem?

Can be cache, make sure to clean the cache of your client.

MattHoy commented 2 years ago

Changing to 5000 and deleting the .gz did not resolve for me, tried bouncing HA and clearing my cache.

mvanlijden commented 2 years ago

@DBuit @wtrbuit any update or idea on this?

Gilles-Clemenceau commented 2 years ago

Changing to 5000 and deleting the .gz did not resolve for me, tried bouncing HA and clearing my cache.

For me, it's working sometimes. It depends on the page where I clear the cache. :-/

mn-box commented 2 years ago

Any update or idea on a solution? Keen to use the bottom card!

ryanm7780 commented 2 years ago

Any update or idea on a solution? Keen to use the bottom card!

Same here. I love the idea of this, but not being able to use custom cards makes it way less useful.

neuroverflow commented 2 years ago

the patch I mentioned above works. I use it everyday and a few confirmed it's correct

mn-box commented 2 years ago

Mmm, the patch works but not always. It seems to work if I access the home navigation page only, but if I reload any of the other navigation pages it doesn't appear. This workaround is of course better than nothing... as I can make sure to always enter via home. But I can still end-up without bottom card if I click too quickly on one of the other navigation links after the page loads...

Hope this helps to find the solution....

Update: somehow it stopped working, not sure why

MetroAffe commented 2 years ago

I like this sidebar card soo much but not without the bottom cards :( Please fix that! Its a long time ago since the bug was opened

Ming-A commented 2 years ago

same issue here

mn-box commented 2 years ago

As a workaround, create a small custom card that for the botton card (e.g. WiFi QR button) and use that same card on your home page at the bottom. Only one of the botton cards needs to be repeated for this to work.

MetroAffe commented 2 years ago

neither the patch nor the workaround works for me on IOS (App, Safari, Chrome - Desktop mode)

nyffchanium commented 2 years ago

It looks like there are two distinct problems:

Home Assistant does not register all available cards as custom elements. From my observations: registered on initial load: all custom cards, core cards used by the initial view when loading the page. registered when navigating to another view: cards used by the new view Navigating does not remove registrations, it only adds missing card types. You can see this by looking at window.customElements.
Timing. Even when all card types required for the bottom card are registered through the initial view, this takes some time, and the original 2ms might not be enough.

This also explains why neither the patch nor the workaround work for everyone.

So what currently works for me:

Change the timeout (as mentioned here) to something that works for you, this will depend on the browser & device.
Make sure you have all the card types you want to use in the bottom card in your initial view. This will probably still not work if you change views too quickly on load. For this case, I guess, you would have to add all types to all views.

As for how this could be fixed: One way to at least avoid the ugly timer hack, would be to use CustomElementRegistry.whenDefined() to wait for the card type(s) to be defined. For this to work properly with cards that have sub-cards, one would have to recursively search the config object for other card types. I guess that could work pretty ok-ish if you look for things like:

card:
  type: card-type
# or
cards:
  - type: card-type

How to get Home Assistant to register the custom elements in the first place, I have no idea.

400HPMustang commented 2 years ago

Nevermind. Found it.

Changing that value to some large number did not solve my problem. Sometimes the sidebar card doesn't load at all and sometimes it loads without the bottom cards. It usually always loads everything after one or two reloads

Krispkiwi commented 2 years ago

Any work on this?

seanharsh commented 2 years ago

Just another workaround that seems to load the bottom cards fairly consistently now.

In addition to increasing the error timeout to 5000, you can also use the preload card: https://github.com/gadgetchnnel/lovelace-card-preloader to load all cards that you are including in the bottom of the sidebar.

For example, the in top of my lovelace yaml, I am calling the preloader for these cards types I am using in my sidebar:

preload:

conditional
entities
glance
horizontal-stack
vertical-stack
custom:simple-weather-card
picture-entity
custom:mini-graph-card

There is still a little bit of a delay, but the cards do seem to load most times for me using this.

400HPMustang commented 2 years ago

Just another workaround that seems to load the bottom cards fairly consistently now.

In addition to increasing the error timeout to 5000, you can also use the preload card: https://github.com/gadgetchnnel/lovelace-card-preloader to load all cards that you are including in the bottom of the sidebar.

For example, the in top of my lovelace yaml, I am calling the preloader for these cards types I am using in my sidebar:

preload:

conditional

entities

glance

horizontal-stack

vertical-stack

custom:simple-weather-card

picture-entity

custom:mini-graph-card

There is still a little bit of a delay, but the cards do seem to load most times for me using this.

Well that takes consistently 5 seconds to load the cards when I set it up but I still have problems where the sidebar doesn't load at all in some cases on some dashboards.

karimbizid commented 2 years ago

I have the card showing up while restarting the browser again. As soon as I refresh the page the card is gone until I close the browser and reopen it again. Workaround of adding the same card to my layout doesn't work for me.

daytonturner commented 2 years ago

Has anyone made any progress getting this to work in something like Fully Kiosk Browser? I can get it to load pretty reliably using the preload and 5sec buffer tricks above, but still have absolutely no luck when loading inside of fully kiosk browser.

nghetienhiep commented 1 year ago

My steps. Go to release and download the latest version. In the file sidebar-card.js find "Bottom card config error!", look to the right there is a string ",2)" replace it with a number greater than 2000. It works for me.

DBuit / sidebar-card

Bottom card issue #45