custom:button-card fails to show intermittently on dashboards in ha-2023.4.xx

[matthyne]

Checklist

• [ X] I updated the card to the latest version available
• [ X] I cleared the cache of my browser

Describe the bug Since either late 2023.3.xx and early 2023.4.xx something happened in HA that is causing cards with custom:button-card to intermittently fail to show in dashboards.

The cards show as missing but if you click on "edit dashboard" the card outlines will show and you can then click "edit" to see the YAML and preview.

Reloading the dashboard will either fix the problem or make it worse. Repeated reload of the browser window or a restart of HA will temporarily fix the problem (for that session).

The problem shows both in the Web version of HA and mobile companion app. Has been verified on multiple devices Version of the card Version: v3.5.0

To Reproduce This is the configuration I used: type: custom:button-card template: container color: '#00E730' name: Television Power custom_fields: buttons: card: type: horizontal-stack cards:

• type: button tap_action: action: toggle entity: switch.family_tv_pwr icon: mdi:television name: Family/Living TV show_state: false
• type: button tap_action: action: toggle entity: switch.kitchen_tv_pwr icon: mdi:television name: Kitchen TV
• type: button tap_action: action: toggle entity: switch.media_tv_pwr name: Media TV icon: mdi:television

Screenshots

Expected behavior It is expected that the cards be fully rendered and show every time the dashboard shows.

Desktop (please complete the following information):

• Browser: chrome
• Version: 112.0.5615.137

Smartphone (please complete the following information):

• Device: Samsung Galaxy S22
• OS: Android 13
• Browser Chrome
• Version [e.g. 22]

Additional context Problem impacts both web and mobile client.
Very similar problem to https://github.com/home-assistant/frontend/issues/16155

[awilson133]

Seconding that I have this issue too. Happens across multiple devices and browsers, have cleared the cache and reinstalled the app many many times.

More details to the issue:

• Never happens when paging between dashboards (e.g. go to energy and back to the main dashboard with button-cards on them, it works 100% of the time)
• Most often happens on browser refresh or app close/open
• Very random, sometimes it's missing one card, sometime it is missing 4-5
• My dashboard has been static for over 6 months and this just started happening recently
• Tried in 5.0 beta and this problem still occurs the same as in 4.6 stable
• When the problem occurs, in my browser's console, I see the following error (not present when everything renders properly): hui-error-card TypeError: n.setConfig is not a function followed by a line reference to button-card.js:425:5936

[RomRider]

Any logs in the javascript console?

[awilson133]

Any logs in the javascript console?

Personally I just get hundreds of the following when it happens: hui-error-card TypeError: n.setConfig is not a function followed by a line reference to button-card.js:425:5936

Can post the whole log trace but its literally just that and it would take some effort to sanitize. Happy to do so if it will help though!

[Mariusthvdb]

could you simplify the erroneous card config? asking because embedding (core) button inside the custom:button-card in the main post.

Would be interesting to test if the embedded horizontal-stack is throwing the error, or the main card config itself.

[awilson133]

could you simplify the erroneous card config? asking because embedding (core) button inside the custom:button-card in the main post.

Would be interesting to test if the embedded horizontal-stack is throwing the error, or the main card config itself.

Absolutely. I made a new dashboard with 2 basic title cards containing 3 buttons each (all just native button-card stuff). The issue occurs exactly the same, dash is nothing fancy at all. I am a different guy than the OP and don't use core buttons inside of button cards anywhere, just button card items.

Attached the YAML in dashboard.txt. The error file is 103 MB of just looping errors as posted above, if you want me to try to trim it down and post it I can as well.

dashboard.txt

[neon-rage]

I have had the same issue. In my case, I have a picture-entity card within the button-card. I see thousands of the same error: hui-error-card TypeError: n.setConfig is not a function. As mentioned above, its intermittent, started suddenly around 2023.4, does not happen if switching views (only on a refresh) and nothing changed otherwise leading up to this. I had this button working for over a year prior. Occurs on PC web browser, mobile client, and Android wall tablet.

[awilson133]

I have had the same issue. In my case, I have a picture-entity card within the button-card. I see thousands of the same error: hui-error-card TypeError: n.setConfig is not a function. As mentioned above, its intermittent, started suddenly around 2023.4, does not happen if switching views (only on a refresh) and nothing changed otherwise leading up to this. I had this button working for over a year prior. Occurs on PC web browser, mobile client, and Android wall tablet.

Thanks for the support :)

In my case, no picture-entity-card is being used. Let me know if I can provide more assistance to help here. Absolutely love this project and would love to help out!

[matthyne]

In the screenshot above it shows all instances of custom:button-card not showing up and some of these are very simple single element button cards without any additional embedded cards. Seems like the problem is only related to the custom:button-card card.

[matthyne]

Here is some config logs:

[neon-rage]

Those are the exact errors I see too in Chrome developer console.

Another tidbit, I thought maybe it was somehow time related, as it if it was happening in 1 browser, maybe it was happening right now in another at that instant, but have since disproven that theory.

[sh00bx]

I'm seeing this problem very consistently in conjunction with popup cards (browsermod). Havent seen a button once on any of the popups after upgrade to 2023.4. Errors on devtools sound just slightly different in my case:

[awilson133]

I think I found a smoking gun here... When using Chrome and toggling on "pause on breakpoints," I can see that the error trying to be passed back to n.SetConfig is as follows:

The interesting part too is that this error is implying that the use of either vertical-stack or horizontal-stack is playing a part here (it changes based on if my dashboard is using horizontal or vertical stack). If I remove all instances of horizontal or vertical stacks from the dashboard, everything works as expected, and the issue never happens. @RomRider any thoughts or any way I can assist here?

EDIT: I also changed horizontal-stack to grid and this 100% fixes the issue for me too. Something like:

Broken: type: horizontal-stack Working:

      type: grid
      columns: 2
      square: false

[awilson133]

I think I found a smoking gun here... When using Chrome and toggling on "pause on breakpoints," I can see that the error trying to be passed back to n.SetConfig is as follows:

The interesting part too is that this error is implying that the use of either vertical-stack or horizontal-stack is playing a part here (it changes based on if my dashboard is using horizontal or vertical stack). If I remove all instances of horizontal or vertical stacks from the dashboard, everything works as expected, and the issue never happens. @RomRider any thoughts or any way I can assist here?

EDIT: I also changed horizontal-stack to grid and this 100% fixes the issue for me too. Something like:

Broken: type: horizontal-stack Working:

      type: grid
      columns: 2
      square: false

Just replying here to state that I changed all my dashboards to use grid instead of horizontal or vertical stack (which really makes them ugly but that is irrelevant), and have had NO incidences of this issue for 20 hours across all my devices. It used to happen every second or third load so this is clearly a fix.

[neon-rage]

My disappearing button card is not inside a vertical or horizontal stack, it is within a grid. However I do have a vertical-stack elsewhere on the dashboard.

[awilson133]

My disappearing button card is not inside a vertical or horizontal stack, it is within a grid. However I do have a vertical-stack elsewhere on the dashboard.

Believe it or not, this appears to be relevant in my testing. Try removing the vertical stack and see if it resolves similar to me. If a button card is in a stack anywhere on the dash, I get this problem. Even if it is a completely blank button card it will cause this issue to crop up and random cards to disappear (or all of them to)

[LexusSpeed03]

Any resolution for this?

[awilson133]

Any resolution for this?

I wish...My work around is still working for me, but it drastically "uglies up" my dashboards.

[matthyne]

I am going to have to ditch custom:button-card if I cannot get an update or solution to this soon. I just cannot have my users complaining that they are missing cards appearing every day.

[matthyne]

I have gone ahead and removed all instances of horizontal-stack in my dashboard and I am still seeing the problem (after full reboot) so I am not sure if this problem is only related to horizontal-stack.

[slothking87]

For me the problem was a combination of grid/stack cards, and using basic entity cards. When I changed my buttons to custom:button_card it worked fine.

No idea what the cause was though

[awilson133]

I have gone ahead and removed all instances of horizontal-stack in my dashboard and I am still seeing the problem (after full reboot) so I am not sure if this problem is only related to horizontal-stack.

Did you remove all instances of horizontal and vertical stacks from all parts of the dashboard? For me that fixed it. If I add even one back to an unrelated component the issue comes back.

[matthyne]

So I have removed ALL instances of h-stack and v-stack cards from my dashboard now and it seem to be stable. I moved everything to grid cards with minimal impact on the UI.

[ktownsend-personal]

Has anyone figured out what's wrong with the stack cards that is causing this? I would love to fix the root issue instead of refactoring the large number (77) of stack cards I'm using across all my dashboard views.

[awilson133]

Has anyone figured out what's wrong with the stack cards that is causing this? I would love to fix the root issue instead of refactoring the large number (77) of stack cards I'm using across all my dashboard views.

Unfortunately I think this project is relatively unmaintained. I am not a JS expert so I have little idea where to start looking for issues.

[neon-rage]

Since upgrading to 2023.6 yesterday, I have not seen the missing custom:button-card objects once across the 3 devices I use the dashboard on. Maybe it was magically fixed by something in the core update? Has anyone else noticed this?

[awilson133]

Since upgrading to 2023.6 yesterday, I have not seen the missing custom:button-card objects once across the 3 devices I use the dashboard on. Maybe it was magically fixed by something in the core update? Has anyone else noticed this?

Confirmed, this fixed it for me as well. Recommend this issue be closed as resolved.

[neon-rage]

Not sure if its just me, but this appears to be back and happening to me on the same button card in 2023.10.

[milkmanrox]

I am seeing the same issue, sometimes having to restart my HA app on my phone several times before it will reappear. Currently running 2023.10.5.

[awilson133]

I am seeing the same issue, sometimes having to restart my HA app on my phone several times before it will reappear. Currently running 2023.10.5.

Verified it's the exact same issue again for me. Going back to 2023.9.* fixes it for me but that's hardly a "fix."

[TimFrymire]

This is also happening to me. 2023.10.5

Guess we're rollin' back.

[lolo2306]

I think I found a smoking gun here... When using Chrome and toggling on "pause on breakpoints," I can see that the error trying to be passed back to n.SetConfig is as follows: The interesting part too is that this error is implying that the use of either vertical-stack or horizontal-stack is playing a part here (it changes based on if my dashboard is using horizontal or vertical stack). If I remove all instances of horizontal or vertical stacks from the dashboard, everything works as expected, and the issue never happens. @RomRider any thoughts or any way I can assist here? EDIT: I also changed horizontal-stack to grid and this 100% fixes the issue for me too. Something like: Broken: type: horizontal-stack Working:

      type: grid
      columns: 2
      square: false

Just replying here to state that I changed all my dashboards to use grid instead of horizontal or vertical stack (which really makes them ugly but that is irrelevant), and have had NO incidences of this issue for 20 hours across all my devices. It used to happen every second or third load so this is clearly a fix.

Same issue for me. Using grid instead of horizontal-stack is a workaround. Core : 2023.11.2 Supervisor : 2023.11.0 Operating System : 11.1 User Interface : 20231030.2

[awilson133]

I think I found a smoking gun here... When using Chrome and toggling on "pause on breakpoints," I can see that the error trying to be passed back to n.SetConfig is as follows: The interesting part too is that this error is implying that the use of either vertical-stack or horizontal-stack is playing a part here (it changes based on if my dashboard is using horizontal or vertical stack). If I remove all instances of horizontal or vertical stacks from the dashboard, everything works as expected, and the issue never happens. @RomRider any thoughts or any way I can assist here? EDIT: I also changed horizontal-stack to grid and this 100% fixes the issue for me too. Something like: Broken: type: horizontal-stack Working:

      type: grid
      columns: 2
      square: false

Just replying here to state that I changed all my dashboards to use grid instead of horizontal or vertical stack (which really makes them ugly but that is irrelevant), and have had NO incidences of this issue for 20 hours across all my devices. It used to happen every second or third load so this is clearly a fix.

Same issue for me. Using grid instead of horizontal-stack is a workaround. Core : 2023.11.2 Supervisor : 2023.11.0 Operating System : 11.1 User Interface : 20231030.2

Hilarious this is the EXACT same issue as before. Hope it gets fixed. I'm stuck on an old version until then.

[lucacasonato]

For those running into this issue: the problem is that the button-card.js file is being executed before the Home Assistant built-in components themselves are loaded.

You can work around this as follows:

1. Open your configuration.yaml file and look for the location you load button-card.js. This should look something like:

   lovelace:
    resources:
      - url: /ui_lovelace_minimalist/cards/button-card/button-card.js
        type: module

   The URL may be different depending on how you installed button-card, but it should generally end in button-card.js.

2. Take a note of the url as you will need it in a moment.
3. Replace the url with /local/button-card-loader.js
4. Create a www/button-card-loader.js file in your Home Assistant directory with the following contents, making sure to replace <url> with the url you noted down in step 2.

   const ORIGINAL_URL = "<url>"; // replace <url> with the `url` you noted from your configuration.yaml file earlier
   // wait until HA frontend is loaded and components are registered
   customElements.whenDefined("hui-error-card").then(() => {
    // then import the original button-card.js
    return import(ORIGINAL_URL);
   })
   .catch(e => console.error("Failed to load button-card:", e));

5. Restart Home Assistant

[awilson133]

For those running into this issue: the problem is that the button-card.js file is being executed before the Home Assistant built-in components themselves are loaded.

You can work around this as follows:

1. Open your configuration.yaml file and look for the location you load `button-card.js`. This should look something like:
   ```yaml
   lovelace:
     resources:
       - url: /ui_lovelace_minimalist/cards/button-card/button-card.js
         type: module
   ```

   The URL may be different depending on how you installed `button-card`, but it should generally end in `button-card.js`.

2. Take a note of the `url` as you will need it in a moment.

3. Replace the `url` with `/local/button-card-loader.js`

4. Create a `www/button-card-loader.js` file in your Home Assistant directory with the following contents, making sure to replace `<url>` with the url you noted down in step 2.
   ```js
   const ORIGINAL_URL = "<url>"; // replace <url> with the `url` you noted from your configuration.yaml file earlier
   // wait until HA frontend is loaded and components are registered
   customElements.whenDefined("hui-error-card").then(() => {
     // then import the original button-card.js
     return import(ORIGINAL_URL);
   })
   .catch(e => console.error("Failed to load button-card:", e));
   ```

5. Restart Home Assistant

This absolutely worked for me on the latest version of HA (2023.12.4). @RomRider does this help solve the issue? I wish I were smart enough to get this into a coherent pull request but it doesn't seem like a tough fix. For now, you have to remove the HACS version of button card, install it manually, and register the button-card-loader.js and everything is solid again. Huge thanks to @lucacasonato!!

[Bigboldbri]

For those running into this issue: the problem is that the button-card.js file is being executed before the Home Assistant built-in components themselves are loaded. You can work around this as follows:

1. Open your configuration.yaml file and look for the location you load `button-card.js`. This should look something like:
   ```yaml
   lovelace:
     resources:
       - url: /ui_lovelace_minimalist/cards/button-card/button-card.js
         type: module

The URL may be different depending on how you installed button-card, but it should generally end in button-card.js.

2. Take a note of the url as you will need it in a moment.

3. Replace the url with /local/button-card-loader.js

4. Create a www/button-card-loader.js file in your Home Assistant directory with the following contents, making sure to replace <url> with the url you noted down in step 2.

   const ORIGINAL_URL = "<url>"; // replace <url> with the `url` you noted from your configuration.yaml file earlier
   // wait until HA frontend is loaded and components are registered
   customElements.whenDefined("hui-error-card").then(() => {
    // then import the original button-card.js
    return import(ORIGINAL_URL);
   })
   .catch(e => console.error("Failed to load button-card:", e));

5. Restart Home Assistant

This absolutely worked for me on the latest version of HA (2023.12.4). @RomRider does this help solve the issue? I wish I were smart enough to get this into a coherent pull request but it doesn't seem like a tough fix. For now, you have to remove the HACS version of button card, install it manually, and register the button-card-loader.js and everything is solid again. Huge thanks to @lucacasonato!!

Stumbled into this issue after converting my Dashboard to use button-card in place of layout-card in latest ATOW HA version 2024.6.3 Creating the button loader file and referencing through the resources option on the dashboard menu plus a restart fixed the issue.

More thanks owed to lucacasonato !

[modo1302]

will there be a fix for this issue for people who install custom button via hacs?