Anyway to get custom components to work when casting?

[john2014 (John)]

I am using Google Cast to cast a dashboard to my Google Hub. It works fine as long as I don’t use a custom component.

As soon as I use a custom component, I will always get the message “Custom element doesn’t exist: -name of card-”. I will only get this message when viewing the dashboard on the Google Hub, If i view the dashboard on any other browser it will work fine.

I have read all the posts I could find on this. And it seems many people solved it by adding an extra URL for the resource. So next to “/hacsfiles/…” also add “/local/comunity/…”, but this does nothing for me. A custom component will always show the error message. This is the case for EVERY custom component. Also manually installing the custom component does not solve anything.

I also understand that some custom components need to be updated to work. But it happens with EVERY custom component.

Any solution?

[petro]

@john2014

custom component

you mean custom card. This is confusing for everyone involved because custom components (integrations) are not the same as custom cards.

@john2014

Any solution?

Can you post a link to some of these ‘solutions’ you found in the forum? Maybe I can figure out what they did and help you.

[john2014 (John)]

yes its custom element I think. Its a bit confusing. The card that I want to show most is the custom button-card. But that always gives the error I mentioned.

The post that I use (probably more, but these are the main ones) something about this are :

"custom element doesn't exist" ... but only when casting

Basically everything is working fine through the web interface, however when casting I get the error “custom element doesn’t exist” for all of the custom controls that I have … any ideas what is going on? Thanks

Custom-element doesn't exist

+1 meaning have the same issues after reinstalling a full Image of my HA instance on a new machine. Update: Ok, I was not aware of that change on how to add the configuration. So maybe this helps someone else: Check this comment here: Solved: How do I add custom cards for lovelace?

but they all mention changing the Resource URL. I have changed it to just “/hacsfiles/…”, just “/local/…” and also both. But nothing works.

[petro]

Try changing hacsfiles/… to local/community/…

Also make sure you clear cache and restart

[john2014 (John)]

Try changing hacsfiles/… to local/community/…

Like I mentioned, I already did that.

Also make sure you clear cache and restart

As far as I know there is no way to clear the cache of the Google Hub device. So what I did to achieve this is to reboot the google hub. But it makes no difference.

[nickrout]

Create an issue on the custom card’s github site. That is where the support for a custom card should go.

[john2014 (John)]

But its for ALL custom cards. So its not specific to one card.

[petro]

@john2014

Try changing hacsfiles/… to local/community/…

Like I mentioned, I already did that.

You said you tried:

@john2014

I have changed it to just “/hacsfiles/…”, just “/local/…”

which is not the same directory/mapped path. So did you actually try changing it to the full mapped path instead of just /local/your_file_name.js?

[john2014 (John)]

sorry should have been more clear. Just wanted to shorten the text. But yes thats what I did. I first added all urls that had /hacsfiles to also have an url that had /local/community/… .

I also sure I could access the .js files that are mentioned in the URLs.

I also removed all the urls with /hacsfiles (so just had the /local/community/… ). Which still made my dashboards work fine on my computer browser. But not on the hub

I also tried with just the /hacsfiles url, Which also made my dashboards work fine on my computer browser. But not on the hub

Then I also had both URLs for all the resources Which also made my dashboards work fine on my computer browser. But not on the hub

So changing the URLs of the resources does not seem to be the cause of this issue.

[petro]

That’s the only thing that would block the resources from use, that and cache on the device. What’s the name of your device. You’ve said google hub but googling that turns up nothing. So what’s the actual device name.

[john2014 (John)]

hmm this is weird. I just put button-card.js in /www , /www/community , /www/community/button-card

I then added /local/button-card.js , /local/community/button-card.js AND /local/community/button-card/button-card.js to the resources AND IT WORKS!

Will check with elimination which one solved it. But its unfortunate that installs done through HACS dont seem to work for casting.

[petro]

@john2014

/local/button-card.js

no

@john2014

/local/community/button-card.js

no

@john2014

/local/community/button-card/button-card.js

yes

@john2014

Will check with elimination which one solved it.

no need, read this response.

[john2014 (John)]

@john2014

/local/community/button-card/button-card.js

just having that one will not work. it seems to be /www/button-card.js and then /local/button-card.js which is the one that makes it work.

[petro]

How did you install the cards? By default hacs installs the cards to this location:

\www\community\button-card\button-card.js

which maps to

\local\community\button-card\button-card.js

if you have your file in

\www\button-card.js

then you’d use

\local\button-card.js

but that means you didn’t install through hacs.

[john2014 (John)]

Well thats the strange thing of this issue indeed. I installed it through hacs. Which indeed puts the files in /www/community/button-card But if I then add the resource /hacsfiles/button-card/button-card.js and/or /local/community/button-card/button-card.js it just wont work. It works fine in a normal browser but not on the Google Hub with a cast.

If I however copy the button-card.js to the root /www folder and then add /local/button-card.js as resource it does work in both a normal browser and on the Google Hub.

[petro]

@john2014

Well thats the strange thing of this issue indeed. I installed it through hacs. Which indeed puts the files in /www/community/button-card But if I then add the resource /hacsfiles/button-card/button-card.js and/or /local/community/button-card/button-card.js it just wont work. It works fine in a normal browser but not on the Google Hub with a cast.

that seems like a caching issue then, which means this question i asked earlier will help

@petro

You’ve said google hub but googling that turns up nothing. So what’s the actual device name.

Once you know the device name, google the device name & reset cache

[john2014 (John)]

Its the Google Nest Hub Google Nest Hub Review | PCMag

Afaik there is no way to reset the cache. You can factory reset the device, which would be a bit overkill. I can also reboot the device using the google Home app. I assume/hope that a reboot cleans the cache.

[petro]

I don’t have the device, but does this look like your UI?

How to Check, Manage, and Clear Data/Cache Stored by Google Play Services

[john2014 (John)]

Thanks for searching, but unfortunately no, that’s not the interface.

The device is quite limited in changing any setting on the Google Nest Hub itself. All is done through the app. But there is no option to clean the cache.

Unfortunately I just wanted to add a 2nd custom card to my dashboard and rebooted the Google Nest Hub again. Only to see that the button-card is now not working again …

So I guess it does seem to be a cache issue, but its an issue with the Google Nest Hub, so probably not something that can be fixed in HA.

[petro]

Well, you know the correct community path, and you have 3 options for making it work, all 3 are the same location. at a minimum, the 2nd one should work for everything.

\hacsfiles\button-card/button-card.js
\local\community\button-card\button-card.js
\www\community\button-card\button-card.js

adding a ? to them usually forces the browsers to reload every time. It’ll be a little slower.

\hacsfiles\button-card/button-card.js?
\local\community\button-card\button-card.js?
\www\community\button-card\button-card.js?