SOLVED: My dashboard is haunted (intermitten strage error I can't figure out) and some of my button cards dont work

Configuration Frontend
1

Hey all,

So I have this problem. I have a page in the minimalistic theme that works part of the time. When it does not work a whole bunch of lights using the custom button card and light-card do not work.

  • If I go to the stock minimalist adaptive page and then come back, it starts working when I come back
  • If I hit reload in the dashboard, it seems to stay
  • If I go to another normal page (the default overview) and come back, its still broke
  • If it is working, I can go to other pages and reload and its still fine
  • If I refresh the browser, it breaks again
  • If restart home assistant from the developer page, then click on this dash it works about half the time.

On the same page, I have other custom button cards, but not for lights, that seem to work fine.

I’ve made sure the includes are the same at the top of the page… It seems like something is getting loaded by the other page this one needs. Not much is going on for the other page though

I was thinking that something in storage versus yaml, but the fact it works right after a boot until I change screens is odd.

When it fails, the browser console I see

button-card.js:426 TypeError: Cannot read properties of undefined (reading 'style')
    at button-card.js:426:18867
    at Ti._createCard (button-card.js:426:19038)
    at button-card.js:445:213
    at Array.forEach (<anonymous>)
    at Ti._buildCustomFields (button-card.js:445:30)
    at Ti._gridHtml (button-card.js:524:25)
    at Ti._buttonContent (button-card.js:506:454)
    at Ti._cardHtml (button-card.js:486:18)
    at Ti.render (button-card.js:426:19509)
    at Ti.update (button-card.js:1:14818)

button-card.js:426 Uncaught (in promise) TypeError: e.setConfig is not a function
    at Ti.render (button-card.js:426:19640)
    at Ti.update (button-card.js:1:14818)
    at Ti.performUpdate (button-card.js:1:6145)
    at Ti.scheduleUpdate (button-card.js:1:5792)
    at Ti._$Ej (button-card.js:1:5700)

Any ideas on troubleshooting would be greatly appreciated.

PS. The other thing I am seeing is that I have button card defined in three places:

  • In the settings / dashboard resources
  • In the configuration.yaml under frontend
  • In the configuration.yaml under lovelace / resources

They all point at /hacsfiles/button-card/button-card.js

It seems limited to my button-cards that use the light template.

One other difference is that the dashboard that fixes it is through the config UI and storage… but maintained over YAML. The one that breaks now is set up through the configuration.yaml file.

2

I am not entirely sure why this happens, but I have enough information to guide the next poor lost soul.

I installed minimalist via HACS, I also installed some of the dependencies that way, namely my-cards which has my-slider.

My problem would happen because my dashboard was driven my configuration.yaml and for some reason, would not load the my-slider without it being specifically named as a module in the yaml.

When I went to the other page that would start it working, I assume it lazy loaded from storage or something making it available to the configuration based dash.

The solution was to debug till I found the library it was failing on (the error handler was failing also) and add that as a module to my lovelace config also.

I am sure that will bite me someday, but it fixed the dashboard!

3

Hi @bchmura , I came across your post while trying to debug the very same issue that you reported. I cannot fully understand what files you changed with what changes inside. Is there any online documentation detailing how to make the changes you mentioned here. I’m desperately trying to find a solution to this error as it doesn’t seem like its getting fixed within button-card itself any time soon.

Any guidance you have would be greatly appreciated.