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.