HA 2021.12 -> hui-error-card TypeError: n.setConfig is not a function

[DirkMu]

Checklist

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

Describe the bug Since I updated to HA 2021.12.0 (core-2021.12.0) the user interface, which contains lots of button cards, no longer loads or takes hours to load. Browser console throws hundrets of error messages related to button card. That is why I assume this is related to button card. With HA 2021.11.5 everything works fine. The standard cards are working fine and load immediately.

Version of the card Version: 3.4.2

To Reproduce This is the configuration I used:

Screenshots

Expected behavior UI loads

Desktop (please complete the following information):

• Browser Chrome, iOS Companion App, Chrome on iOS
• Version 96.0.4664.45

Smartphone (please complete the following information):

• Device: iPhone 13 Pro
• OS: iOS 15..1.1
• Browser Chrome
• Version 96.0.4664.53

Additional context Add any other context about the problem here.

[DirkMu]

Just checked my 2021.11.5 installation. When loading the user interface no error messages related to button card are thrown at all in the console.

[arigit]

I also noticed that since 2021.12.1, my "vertical-stack-cards" containing rows of custom button cards, only show the card titles (and no content) when the page is first loaded (this happens in any browser and also with the android app). The require a "Refresh" to be triggered (from the three-vertical-dot menu) in order for the UI to be reloaded and on the second reload, the content does show. Runnin 2021.12.2 and the web console does not show any error message

@DirkMu did you find any workaround for this?

E.g. on first load (http://my-raspberry:8123)

clicking refresh,

then I see the vertical-stack-in-card content:

This is the yaml configuration pattern/constructs:

  - type: vertical-stack
      cards:
        - type: custom:vertical-stack-in-card
          title: Exterior Door Sensors
          cards:
            - type: horizontal-stack   # door sensors       
              cards:
                - type: custom:button-card
                  entity: binary_sensor.main_entrance_access_control_window_door_is_open
                  name: 'Main Entrance'
                - type: custom:button-card
                  entity: binary_sensor.kitchen_access_control_window_door_is_open
                  name: 'Backyard'
...............

Clearing the browser cache, or deleting all data of the android app, does not fix the problem. Issue 100% reproducible by manually navigating to http://your_raspberry_ip:8123

No errors pop up in HA's log nor in the browser console:

[DirkMu]

The hint "Refresh" worked indeed on my laptop. The UI is loaded now. However, this workaround does not work on my iPhone. The UI or the part where button card is used, does not load.

[RomRider]

@DirkMu This is unrelated to button-card, but it seems that something changed with loading custom-cards from within other custom-cards. If you remove the vertical-stack-in-card it should work all the time. Please confirm.

[DirkMu]

I will try. What do you mean by remove vertical-stack-in-card? Remove it completely (uninstall via HACS) or creating a dashboard that does not contain nested custom-cards including vertical-stack-in-card? I did try a dashboard only containing a button-card and it did not work on iPhone.

[RomRider]

I meant without vertical-stack-in-card in the dashboard. Might also be card-mod as I have some issues with that lately also

[DirkMu]

I just tried a dashboard with button-card only. It did not load and the console showed the same errors. I rather use one card of stack-in-card than vertical-stack-in-card. vertical-stack-in-card is not installed. I removed it after a created the issue here as I faced issues with the card. I am using custom_fields in the button-card. It is a row consiting of a horizontal-stack and multiple button-card. Might this be an issue?

home_cards_room:
  template:
    - home_cards_base
  styles:
    label:
      - color: >
          [[[ 
            if(!variables.warm || !variables.kalt) {
              return 'grey';
            } else {
              if (states[variables.warm].state == 'on') {
                return 'rgb(255, 102, 0)';
              } else if (states[variables.kalt].state =='on') {
                return 'rgb(0, 153, 255)';
              } else {
                return 'grey';
              }
            }
          ]]]
  double_tap_action:
    haptic: success
    action: call-service
    service: homeassistant.turn_off
    service_data:
      entity_id: entity
  custom_fields:
    icons: 
      card:
        type: horizontal-stack
        cards:
          - type: 'custom:button-card'
            template: home_cards_icons_light
            entity: '[[[ return variables.lights ]]]'
          - type: 'custom:button-card'
            template: home_cards_icons_cover
            entity: '[[[ return variables.covers ]]]'
          - type: 'custom:button-card'
            template: home_cards_icons_shading
            entity: '[[[ return variables.shading ]]]'

[arigit]

@RomRider you are right, confirmed in my case, replacing:

custom:vertical-stack-in-card

with

vertical-stack

...brings all buttons back on initial load of http://my_raspi:8123, without the need of a manual Refresh.

Of course, there was a reason I was using vertical-stack-in-card: the button array looked much better with it than with vertical-stack, so I'm hoping this can be fixed.

Do you know if there is a UI bug opened for this that we can subscribe to?

[DirkMu]

I removed all references of vertical-stack-in-card and stack-in-card and it still doesn't work. When removing the custom_fields with the horizontal stack it works.

[DirkMu]

The issue indeed was not caused by the button card. It is gone since the last releases of HA. However, there is an issue with loading a horizontal stack card within button card. @RomRider Did you figure out the root cause already?

[RomRider]

Good to know that it works again, I need to test that use case with horizontal-stack

[ktownsend-personal]

I'm getting this exact same error right now on home assistant 2023.5.3 and the latest version of custom button card 3.5.0. I skipped HA 2023.4.x, so not sure when this issue was introduced. I use over 75 instances of button card on my main dashboard and this issue is flooding the debug console big time. Is anyone else seeing this issue lately?

[usernein]

@ktownsend-personal I'm facing that same issue as well

[StarScream159]

I too have this problem. I am seeing thousands of errors in my browser console. Enough that I've even seeing the error "Maximum call stack size exceeded".

Home Assistant 2023.7.2 Supervisor 2023.07.1 Operating System 10.3 Frontend 20230705.1 - latest button-card v3.5.0 installed via HACS I am using UI Lovelace Minimalist "theme" installed via HACS Brave Browser: Version 1.52.130 Chromium: 114.0.5735.198 (Official Build) (64-bit)

Anyone find a fix for this? It lags the interface a lot.

[Sergiodiaz53]

I too have this problem. I am seeing thousands of errors in my browser console. Enough that I've even seeing the error "Maximum call stack size exceeded".

Home Assistant 2023.7.2 Supervisor 2023.07.1 Operating System 10.3 Frontend 20230705.1 - latest button-card v3.5.0 installed via HACS I am using UI Lovelace Minimalist "theme" installed via HACS Brave Browser: Version 1.52.130 Chromium: 114.0.5735.198 (Official Build) (64-bit)

Anyone find a fix for this? It lags the interface a lot.

Do we have any updates on this? I'm having the same error.