Error: "Custom element doesn't exist" on builtin cards

[rummik]

Describe the bug There seems to be an issue with embedding builtin cards

To Reproduce Steps to reproduce the behavior:

1. Create a custom:room-card
2. Add a sub-card using any builtin card (ex: picture-glance)
3. Click on 'save'
4. Reload the page
5. See error

Example YAML:

type: custom:room-card
title: Kitchen
cards:
  - camera_view: live
    type: picture-glance
    title: Kitchen
    image: https://demo.home-assistant.io/stub_config/kitchen.png
    entities:
      - entity: sensor.uptime

Expected behavior Custom room card should be visible with builtin card

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser: Firefox
• Version: 105.0.1

Additional context Looks like this may be related to #64

[marcokreeft87]

Working on my HA. Which version do you use?

[rummik]

Current HA (2022.10.5). Have you saved and reloaded the dashboard?

[marcokreeft87]

Ah on mobile I get it too. Weird, but I might know what's the problem

[marcokreeft87]

Ah on mobile I get it too. Weird, but I might know what's the problem.

Edit: nope that isn't it

[rummik]

I've poked at it a little bit the other day, but I don't know enough about how HA handles card loading to submit a fix 😅

At least it's relatively easy to reproduce I guess?

[marcokreeft87]

It is easy to reproduce, but since this is an error HA throws it a pain to debug

[marcokreeft87]

Weird thing is, for example the "entities" card is working..

[rummik]

I'm finding that it works if I have the builtin card I want loaded elsewhere on the dashboard. If I can manage to find the time I'll dig around and see if I can get a PR, since I did notice there's an exposed API that doesn't seem to be used by the library you're using, and I'd like to compare what's being done differently

[marcokreeft87]

That would be nice. Good find btw

[omayhemo]

I have the same problem.

[omayhemo]

FYI latest version I grabbed from HACS didn't solve, but you probably knew that already.

[marcokreeft87]

FYI latest version I grabbed from HACS didn't solve, but you probably knew that already.

Thats why there are release notes in them :P

[marcokreeft87]

@omayhemo Weird thing is, I had this error while developing 1.07.01 but its gone now

[omayhemo]

ORLY? I can't be arsed. :)

[omayhemo]

@omayhemo Weird thing is, I had this error while developing 1.07.01 but its gone now

Since its WOM, I wonder if your local differs from the repo?
Don't know if it helps or not, but if I goto the edit popup for the element, the card that errors is properly shown. If I make a change and save, the card will now show on the dashboard as well.

[marcokreeft87]

Its the exact same version

[omayhemo]

I haven’t tried other browsers just edge, I’ll test others when I can. Just trying to provide a little data no idea if it helps you or not.

[omayhemo]

Exists in all browsers, just FYI. Furthermore, I get a a.style can't be on undefined error periodically as well. Refreshes don't help, I have to go in and literally perform an edit on the card and save it and then the whole view will work. There seems to be a rendering timing problem or something. I have to find a different solution at this point.

[marcokreeft87]

Unfortunately I can't test all cards. And tbf it's a nice extra feature, but cards will always work best in a seperate instance.

[csthomas2]

I built a dashboard specifically for mobile with this card. I still get the a.style undefined and element doesn't exist. I temporarily fixed by adding the two built-in cards at the bottom, but I have to scroll all the way down then refresh the page for the a.style error to go away. Then I have to wait until the picture entity cards refresh by themselves for the undefined element to fix itself. I'm using latest versions of the card and HA.

[marcokreeft87]

Can you share your yaml?

[csthomas2]

Sure yaml.yaml.txt

[marcokreeft87]

Sure yaml.yaml.txt

I think the problem here is that you put cards in a horizontal stack in a room card.

[csthomas2]

I removed the horizontal-stacks from the room-cards and loaded the dashboard up in an incognito window. I first get this error (got this before as well). Then the page reloads itself (in incognito, I have to sign in again). Then I proceed to get the "Custom element doesn't exist". I would also get the "Custom element doesn't exist" for the horizontal-stack. Scrolling down and waiting eventually loads my horizontal stacks and the pictures within. The pictures do end up loading without the horizontal-stack as welll, since I have the extra card at the bottom.

edit: actually, this is really weird. The behavior is different without the horizontal-stacks. Even with the built in card at the bottom, I can't get it to eventually load without editing the dashboard as mentioned above.

[marcokreeft87]

Hmm some cards of HA work different from the others. For example the picture entity. But you now get the error like the rest in this topic. I will take the horizontal-card into the test when I finally find the solution to this bug :)

[NeonOby]

Not sure if this is helpfull but this problem also happens when I nest the mushroom card inside the room card. When I reload the dashboard in chrome or when restarting the android app I get either this: or Room cards without nested cards work fine and the mushroom card by itself also works fine.

[marcokreeft87]

Why would you put the mushroom card in a room card? Thats just weird haha. But you have this error because you dont pass any entities to the room card @ADoby

[NeonOby]

"Why would you put the mushroom card in a room card?" Because I want to categorize my entities by room, I thought this is the meaning of the room/entities/auto entities cards. Create one room card and then add all the entities that are inside that room inside the room card. This way it's just a little bit faster and nicer looking to change the brightness or change the cover position.

"But you have this error because you dont pass any entities to the room card" Doesn't seem so. I have multiple room cards in my dashboard every card that doesn't contain "cards:" works fine. As soon as I add a single nested mushroom card it breaks the room card.

I tested nesting the build in light card and it works. At least for me it happens for custom cards, not build in cards even though I haven't tested all of them.

I did change the entitiy ids in the screenshot. The screenshot only shows one of the possible errors, the other one "custom element doesn't exist" still also happens randomly.

[marcokreeft87]

Ah ok. I think this will help. It gives me a direction to search for at least. Thanks for trying multiple configurations

[marcokreeft87]

@ADoby can you provide me with the yaml. Because I'm not getting the error

[NeonOby]

Sure:

type: custom:room-card
title: Room
icon: mdi:lightbulb-outline
cards:
  - type: custom:mushroom-cover-card
    entity: cover.shelly_shsw_25_

Just to clarify, this error does not happen in the preview. The preview always works.

It only happens when you finish editing the dashboard and then reload the page. Then it randomly shows one of the two errors or it can also work randomly.

Here in preview

Then randomly one of the errors when reloading the dashboard

or

or it works

[marcokreeft87]

Ah after a few refreshes I got it too! Nice now I can hopefully fix it

[NeonOby]

I have more details. Every time it works the room card is loaded after the mushroom card.

When it doesn't work loading order is different.

[marcokreeft87]

Yeah I found the problem. Its in a npm package I use. The line that gives the error is : https://github.com/custom-cards/custom-card-helpers/blob/21546a17a667c969738ddb5c80feb1b65e569c69/src/create-thing.ts#L90 But its timing related. If the card is loaded, it works. But sometimes the room card gets loaded before the included card like you said

[marcokreeft87]

Note to self : This might be the solution

customElements.whenDefined(cardConfig.type).then(() => { clearTimeout(timer); fireEvent(element, "ll-rebuild", {}, element); });

[elninosi]

After Home Assistant 2023.4 I'm constantly having this issue. Problem is in nested cards, e.g. cards inside room-card.

Please let me know if any yaml codes from dashboard would help you with debugging the problem. Thanks.

[cookie050]

Same problem

[mdecourcy]

Any updates to this issue? I also experience this

[labaland]

i have error alot, but if i save it it is correct and showing. false errors xD

[marcokreeft87]

Just a little update from my end. Still trying to fix this but its a really tricky timing issue and since I'm working fulltime and I've got baseball in the weekends, I havent got that much time left

[cookie050]

Will you be open for some help? I can have a look but don't know if i can fix it but can give it a try.

[marcokreeft87]

Yeah sure go for it

[marcokreeft87]

@rummik @omayhemo @ADoby @elninosi @cookie050 @mdecourcy Can you guys try 1.07.24 and check if it's fixed now?

[NeonOby]

@marcokreeft87 For me it doesn't help. Same error as before. "Cannot read property of undefined" Tested from the mobile app and mobile browser. Only happens when the dashboard with room cards is the default one. When it first loads another dashboard and then you switch to the one with room cards it loads fine.

I made sure to close the app multiple times and check that the version 1.07.24 is installed. I did not yet restart home assistant.

[mdecourcy]

Issue seems to be resolved for me on my android. I will test further later tonight

edit: never mind, started getting it again, both on my phone and browser. Let me know if there is any logs that I could provide that may be of help.

[elninosi]

Unfortunately issue is stil there.

On Wed, Jun 21, 2023, 02:46 Mac DeCourcy @.***> wrote:

Issue seems to be resolved for me on my android. I will test further later tonight

— Reply to this email directly, view it on GitHub https://github.com/marcokreeft87/room-card/issues/104#issuecomment-1599791089, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACURVVAFKXUTVU5NEVSTAFDXMI74RANCNFSM6AAAAAARLGKLFY . You are receiving this because you were mentioned.Message ID: @.***>

[cookie050]

In app, still same problem. If i change webviewer on android to chrome it works

[marcokreeft87]

Crap @paulonutor seems like your solution doesn't seem to work for everyone. Can you check my note to self solution?

[paulonutor]

My PR fixed something else. Nested entities didn't update on state change. This bug seems interesting and I'm going to take a look at it.

[elninosi]

Looks like some elements are loaded before room card's code and this is causing a problem on slow mobile connection dashboard is almost always loaded properly.