[solved]. Custom element doesn't exist: hui-horizontal-stack-card

Configuration
1

Looks like my browser cache cleared and my lovelace bacame broken because of “Custom element doesn’t exist: hui-horizontal-stack-card.”

It was working fine, no reconfiguration was done, but at some point the custom card stopped to work, and while in cahce was still working. Also I cannot find it in HACS to reinstall it. Is it from card-mod?

image
image964×281 18.2 KB

It loads after few mions and gives error in logs:

Logger: frontend.js.latest.202203012
Source: components/system_log/__init__.py:190
First occurred: 22:53:01 (1 occurrences)
Last logged: 22:53:01

https://xxxxxxxxxxx.duckdns.org/frontend_latest/app.b83d2076.js:850:0 Error: Failed to execute 'define' on 'CustomElementRegistry': the name "mod-card" has already been used with this registry
2

Took me a while, but hey, RTFM! :slight_smile:

type: custom:hui-horizontal-stack-card was a dirty trick.

The proper way:

    type: custom:hui-element
    card_type: horizontal-stack
3

Not sure this fixes the issue. I had the same issue you mentioned so I tried your solution but get the error : custom element doesn’t exist: hui-element.

hui-element
hui-element980×572 103 KB

Pls, let me know if you see a solution as this element worked well for me mostly. Except every once in a while it comes up with the same issue (suspect browser cache issue you mention above).

aj

4

For anyone looking for the correct solution syntax:

  - type: custom:stack-in-card
    mode: horizontal
    cards:

…at least this is what worked for me.

5

No, this is just a different card. Just replacing one card by another one, not fixing a syntax.

6

Ok, thanks, so what is the correct syntax???

7

The replacement is hui-element with card_param=vertical-stack.
But what is your original task, why you used hui in the first place?

8

So I guess then the correct syntax is:

- type: custom:hui-element
    card_param: horizontal-stack
    cards:

and not:

- type: custom:hui-element
    card_type: horizontal-stack

…as originally posted above as the solution.

and not my approach which seemed to work for me:

- type: custom:stack-in-card
    mode: horizontal
    cards:

Just trying to get the correct syntax for the solution. Since mine seemed to work for me then I went with that. Since the OP and I both had intermittent issues with the original approach which also seemed to work but later failed; I was looking for clarification so it won’t bite me in the rear later.

Thanks

9

No, that was a typo on my side:

Surely it is “card_type”.
It is clearly specified in the docs.
But you haven answered my question “why you need this?”
If you are satisfied with “stack-in-card” - then OK.

It works, btw:

image
image950×291 14.7 KB

And I see only usage of hui-element for stacks - placing a stack inside Entities card (which of course may be implemented by using another custom cards).

10

hi. For me working solution was (whole card)

entities:
  - cards:
      - entity: switch.son_gateremote
        icon: mdi:gate
        name: Gate
        state:
          - value: unavailable
            styles:
              card:
                - background-color: '#E0B9C0'
                - font-size: 12px
                - padding: 1%
                - color: white
              state:
                - color: white
          - value: 'off'
            styles:
              card:
                - font-size: 12px
                - padding: 1%
              state: null
          - value: 'on'
            styles:
              card:
                - background-color: '#000044'
                - font-size: 12px
                - color: white
                - padding: 1%
        type: custom:button-card
      - color_type: blank-card
        type: custom:button-card
      - color_type: blank-card
        type: custom:button-card
      - color_type: blank-card
        type: custom:button-card
    type: custom:hui-element
    card_type: horizontal-stack
show_header_toggle: false
style: |
  ha-card {
    border-radius: 20px
  }
  .card-header {
    font-size: 18px;
    padding: 5px 25px;
    font-weight: bold;
  }
type: entities
11

Thank you both for your clarifications. This has been very helpful to me. (lldar_Gabdullin, I have followed your many posts and they have been very useful as well).

To answer your question: I was trying to create vertical-stack and horizontal-stacks using custom button cards.

custom-button-card
custom-button-card1066×1394 127 KB

The results are above and I am happy with it as I no longer get the intermittent errors due to the issue posted.

Thanks, again.

12

Hello,

I am getting the error: Custom element doesn’t exist: hui-element.

But I don’t see where the error is coming from.

It has been working correctly and now I get the error.

My code is:

type: custom:hui-element
card_type: vertical-stack
cards:
  - type: custom:hui-element
    card_type: horizontal-stack
    cards:
      - type: custom:mushroom-entity-card
        entity: sensor.salon_temp
        name: Salón
        icon_type: none
        fill_container: false
        tap_action:
          action: navigate
          navigation_path: SALON
        card_mod:
          style: |
            ha-card {
              background-color: rgba(0,0,0,0);
              box-shadow: none;
              border-style: hidden;
            }
      - type: custom:mushroom-chips-card
        chips:
          - type: action
            tap_action:
              action: call-service
              service: switch.toggle
              target:
                entity_id: switch.suelo_salon
            icon: mdi:heating-coil
        alignment: end
  - type: custom:mushroom-number-card
    entity: number.set_salon_temp
    name: Consigna
    icon: mdi:thermometer
    display_mode: slider
    card_mod:
      style: |
        ha-card {
          background-color: rgba(0,0,0,0);
          box-shadow: none;
          border-style: hidden;
        }
  - graph: line
    type: sensor
    entity: sensor.salon_temp
    detail: 1
    name: Temperatura
    card_mod:
      style: |
        ha-card {
          background-color: rgba(0,0,0,0);
          box-shadow: none;
          border-style: hidden;
        }

I don’t quite understand how to solve it, can someone give me an idea.

Thank you.