Javascript from custom_components not included when casting

[flyize]

The problem

When casting lovelace views, .js from (some?) custom components isn't included. Instead you get an error that the custom element doesn't exist. The same view works correctly from a desktop.

I initially noticed this and found the following thread that suggested the way HACS gzips files might be causing the problem. The fix was to remove the HACS entry from Resources and recreate it using the /local/ path. That seemed to work until recently (maybe sometime this month)? I know there were some casting fixes implemented, so maybe its related?

My specific issue is regarding button-card, but according to this old thread, it effects many others as well.

https://community.home-assistant.io/t/custom-element-doesnt-exist-but-only-when-casting/140458

What version of Home Assistant Core has the issue?

cire-2021.12.7

What was the last working version of Home Assistant Core?

No response

What type of installation are you running?

Home Assistant OS

Integration causing the issue

cast

Link to integration documentation on our website

https://www.home-assistant.io/integrations/cast/

Example YAML snippet

No response

Anything in the logs that might be useful for us?

No response

Additional information

No response

[probot-home-assistant[bot]]

cast documentation cast source _{^{(message by IssueLinks)}}

[probot-home-assistant[bot]]

Hey there @emontnemery, mind taking a look at this issue as it has been labeled with an integration (cast) you are listed as a code owner for? Thanks! _{^{(message by CodeOwnersMention)}}

[flyize]

@emontnemery Maybe I haven't explained this correctly, but it seems this has to be a cast issue. The issue only appears when casting and seems to have started after the latest Cast changes.

[flyize]

Not sure if this could help...

I haven't changed anything over the weekend in HA, but magically all my custom buttons worked on my Google Hub yesterday. They had stopped working by the time I woke up this morning.

[flyize]

So I managed to bandaid this issue. I realized that I was using another custom component (card-mod) and hadn't added duplicated the Resource using the /local/ path.

Since this works everywhere else, I really think this has to be a Cast issue.

[mpartoglou]

Confirming that I have the same issue as @flyize and just like him all my custom elements work perfectly when viewed on web/mobile, however when using the cast feature to show a specific lovelace view on the Google Nest Hub i receive the "Customer Element doesn't exist", i can also fix this with the same bandaid by duplicating the resource using the /local/ path (which introduces other issues).

[bramkragten]

Make sure your cors rules include https://cast.home-assistant.io

[fiskhest]

Can also confirm I'm having this exact issue.

I reconfigured configuration.yaml and restarted HA:

http:
  cors_allowed_origins:
    - https://url.my-ha-instance.tld
    - cast.home-assistant.io
    - https://cast.home-assistant.io

Still seeing the same issue.

[mpartoglou]

Make sure your cors rules include cast.home-assistant.io

I had already added this and tested it prior to posting, same as @fiskhest above.

Let me know if I should test anything else.

[flyize]

BTW, I'm not sure the title is accurate description of the problem. Does anyone know if there is a way to get Chrome dev tools to work on the hub?

[bramkragten]

What files are you trying to load? Files in the /local/ folder or others? And if other, what files, from custom components? And what custom components?

[flyize]

In my specific case, I'm using this (https://github.com/custom-cards/button-card) button card, as well as card-mod. While installed via HACS, I've removed the HACS Resource entries and replaced them with /local/ entries.

This works intermittently, even though I've made no recent changes.

[david78455]

In my specific case, I'm using this (https://github.com/custom-cards/button-card) button card, as well as card-mod. While installed via HACS, I've removed the HACS Resource entries and replaced them with /local/ entries.

This works intermittently, even though I've made no recent changes.

please help have the same issue. I have HACS but it is not appears in the HA how can I rewove it ?

[matthewclaussen]

I have this issue as well with layout-card and Stack In Card.

[bramkragten]

I'm not able to reproduce, things just work here. Could it be that it takes too long to load the custom resources? If you switch to a different view and then back, does it then work?

[flyize]

I just created a view with a single entity and got the same error.

[bramkragten]

That is not what I meant, cast a view, navigate to another view on your cast device and see if the error is also there on the second view.

[flyize]

At the risk of sounding really dumb, I don't have any navigation when I cast. What am I missing?

[bramkragten]

If you are casting to a touch device you can use the navigate action on a button click for example.

type: button
tap_action:
  action: navigate
  navigation_path: /lovelace/0

Otherwise calling a Lovelace cast service call with another view, or a Lovelace cast row, (https://www.home-assistant.io/lovelace/entities#cast) will also work.

[flyize]

Yeah, I realized that I do have a view with some navigate buttons. Seems those don't work at all.

[matthewclaussen]

I'm not able to reproduce, things just work here. Could it be that it takes too long to load the custom resources? If you switch to a different view and then back, does it then work?

I was able to bring the casting back to working when I moved away from the layout-card addon. Same thing when I moved away from grouping together some cards with Stack in Cards, the individual cards came back with no problems.

[flyize]

As a test mentioned a couple posts ago, I used a single button and it was still broken.

edit: and just to show how intermittent it can be, my display is working fine this morning. In no more than a couple hours, it will be broken again though. And if it matters, navigation still doesn't work.

[flyize]

I'm happy to report, that although I've changed nothing, this has been working the past couple of days. Even before the 2022.2 update it was working. So maybe Google fixed something? Here's my versions.

As a random rant, why aren't new HA versions using the leading zero so that computers can easily sort them? It should version 2022.02 darnit!

[flyize]

I knew I shouldn't have said anything. After a couple days of working perfectly, everything is broken this morning again. No changes on my end...

[flyize]

It seems I need to fall on my own sword here. I was going through my custom_components the other day and found a 'cast' folder. I've no idea why I added that at some point, but since I removed it - things have been flawless. I'm sorry for this bonehead move.

[filikun]

I'm not able to reproduce, things just work here. Could it be that it takes too long to load the custom resources? If you switch to a different view and then back, does it then work?

I think this is my problem. I use the lovelace-layout-card type: custom:grid-layout. Sometimes it just does not load in, either it's a blank page or "custom element doesn’t exist". If I change it to an ordinary panel view and reload the view it pops back up and I can switch back to my type: custom:grid-layout and it works again.

This is my view in full:

- title: Cast
  path: cast
  visible: false
  type: custom:grid-layout
  theme: tablet
  layout:
    #default
    grid-gap: var(--custom-layout-card-padding)
    grid-template-columns: repeat(4, 1fr) 0
    grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
    grid-template-areas: |
      "sidebar  .           .       .       ."
      "sidebar  aj          aj      aj      ."
      "sidebar  aj          aj      aj      ."
      "sidebar  footer      footer  footer  ."
  cards:
    - type: custom:button-card #extra_styles fix
      styles: {card: [display: none]}    

    - type: vertical-stack
      view_layout:
        grid-area: sidebar
      cards:

        - type: custom:button-card
          entity: sensor.template_sidebar
          theme: tablet
          template: sidebar

    - type: vertical-stack
      view_layout:
        grid-area: aj
      cards:
        - type: custom:button-card
          template: edge_cast

        - type: entity
          entity: sensor.lovelace_feeding_finn_latest
          theme: tablet
          attribute: state
          name: Mata
          icon: " "     
        - type: entity
          entity: sensor.lovelace_sleeping_finn
          theme: tablet
          attribute: state
          name: Sova
          icon: " "   

[markus99]

Personally using the 'timer-bar-card' and 'weather-card-chart' and neither casting correctly - each is getting the 'custom element doesn't exist' red error message. I did try adding the cors allowed to configuration.yaml. Each of these custom cards is installed via HACS.

Displays fine in Chrome browser not via cast.

is HACS installation at fault? Is there plan to update this component to 'allow' HACS installations / path?

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[ejpenney]

I'm still having this issue as of 2022.6.2

[DerangedWifi]

I'm also having this issue with many of my HACS Frontend cards when casting. Essentially none of them work, is everything really taking long to load? Wifi in the house is pretty excellent and even small cards wont load. Can provide more detailed information, have found no help on the internet.

[fantnhu]

same problem. a lot of custom items don't work. perfect for browser / phone. console no error message, http cros is configured well. on a blank view, simple entities work without a theme

[senbax-admin]

same here with frigate-card

[pezlin]

Same problem with custom:clock-weather-card when casting to Nest Hub

[VladFlorinIlie]

Still happens on 2022.12.6 with custom:flower-card installed through HACS.

[disconn3ct]

I have a view that is about 95% custom cards (clock-weather, platinum-weather, apexcharts, tabbed-card, team cards, etc etc) and it was completely fine until I added a new card yesterday. The other cards are still fine, but the new card is throwing the doesn't exist error. Testing with a home mini and home max.

I added the new plant integration and associated card yesterday. The existing cards all work fine on both devices, but the new card is returning Custom element doesn't exist: flower-card. It works fine on mobile/app/desktop and all of the other custom cards are showing around it (including the tabbed card that wraps it.)

Nothing else has changed, the cast address is (still) included in CORS, served over https, etc. Everything else works fine, just not the new card.

[jeanflajeunesse]

Also having the same issue, HA install is a week old and i've never managed to get custom cards to cast on google home display. I either get Custom element doesn't exist or the card doesn't show up at all depending on how I configure the resources and place the cards.

[sdaoudi]

The same problem with home assistant 2023.2.5 when casting a grid layout to Nest hub

[fernbank]

The same problem with HA 2023.2.5! Worked perfectly with previous HA versions

[redquake83]

Still having the same Problems. Everything works fine on App or Web interface. Cast to Google Nest results in this error.

Current Version: Home Assistant 2023.4.5 Supervisor 2023.04.0 Operating System 10.0 Frontend 20230411.1 - latest

[diogomendes-cmyk]

The issue persists through: Home Assistant 2023.6.1 Supervisor 2023.06.1 Operating System 10.2 Frontend 20230608.0 - latest

This only appears in cast. It really seems it has to be a cast issue. :)

[suneworld]

I also had this exact issue from time to time. But now all my six Nest Hubs are returning this error all the time.

[CV8R]

same problem with the cards listed above - frigate-card, mini-graph-card as examples.

[markus99]

Is @emontnemery still the code-owner for cast? Been some time w/out a resolution. Certainly appreciate the help, but also would love to get this issue(s) resolved. Thx!

[lordbah]

Since it has been a year and a half, can we revisit the workarounds? Is the CORS stuff still relevant in 2023.7? For moving from HACS to local are we talking about moving every directory and file under config/www/community up one level to config/www?

[Pjore]

I had the exact same issue. The working solution for me was to add alternate path for the JavaScript resource ( Settings -> Dashboards -> 3 dots -> Resources )

If you have an existing path /hacsfiles/lovelace-layout-card/layout-card.js?hacstag=156434866244

Add another one with the path /local/community/lovelace-layout-card/layout-card.js?hacstag=156434866244

Also remember that the cache on the Cast device may miss lead you, try rebooting the Cast device, or change the url of the dashboard view in HA

[lordbah]

That progresses me from the doesn't exist error to a blank white page (initially with the little "browser mod" finger in the corner). I'm casting to a Nest Hub Max. I can cast the Overview successfully so I believe I'm using the cast service correctly, I just can't get my ui-lovelace-minimalist view to work. Both of my very old Chromecasts show the same blank white page. UPDATE: I don't know what did it, but my dashboard is partially working now. Maybe I just power cycled the Nest enough times. I will say it seems like when something goes wrong on the Nest, you can't cast anything to it at all until you reboot it. Anyway, mostly working, video from one camera works but video from another camera doesn't. Both going through frigate, both apparently H.264. Probably some limitation of Nest, having nothing to do with this issue.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[lmicalle]

Seems this has regressed in 2024.2 - "Custom element doesn't exist" on casting for elements such as mushroom-climate-card (and other custom cards)

[errrrata]

Experiencing similar issue with https://github.com/thomasloven/lovelace-layout-card on 2024.2 (and previous 2 monthly versions)

[iancg]

I'm getting similar issues with both bubble-card and swipe card, regardless of if installed via HACS or manually in local (and manually adding to Resources).