HACS, card-mod and resources - help please!

klogg · November 19, 2025, 9:01am

I’m looking for some advice!

I have had card-mod and several other custom components installed since way before HACS was a thing.

The recent update to card-mod v4 and the advice in the upgrade notice pointing here has caused me to pause through confusion.

I do use Frontend module

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

But I appear to have two locations that custom components are installed into.

Firstly, it looks the like more recent ones are here:

config/custom_components

leading me to believe HACS puts them there (is hacsfiles some kind of link to this folder?).

And secondly:

config/www/community

which looks like all the ones I’ve had since before HACS (or at least ‘modern’ HACS for those who remember the original one).

Question 1 is, where is the correct place these should be? Should I somehow remove the ones in the wrong place and reinstall using HACS?

Simply put… how do I clean up my config to make it standard?

Question 2 is regarding resources.
My dashboard config is all yaml but I have resources defined in the UI as well as in some cases, duplicated manually in my config.

I really need to make sure I get things right before upgrading card-mod as my dashboards are about 99% reliant on it!!

I’m pretty sure my config for custom components is a bit of a mess and I’d really like to clean it up so any guidance would be greatly appreciated.

Thanks in advance.

- url: /hacsfiles/button-card/button-card.js
  type: module

- url: /hacsfiles/config-template-card/config-template-card.js
  type: module

- url: /hacsfiles/custom-sonos-card/custom-sonos-card.js
  type: module

dcapslock · November 19, 2025, 11:37am

Checking if all good as we discussed this in the main card-mod thread.

klogg · November 19, 2025, 11:42am

Thanks. yes I think so. I report back in the other thread if I have problems

For anyone else reading this I’m still interested in the bigger picture of custom components. I think I might be feeling the effects of having a 7 year old config!!

Oscar1 · November 29, 2025, 6:40am

Hi there,

My current situation is somewhat similar to you. Definitely interested in the bigger picture too.

As far as I can remember, I manually installed card-mod (few years ago, quite sure I followed the instructions then)
My “extra_module” location in configuration.yaml is:
/local/plugins/card-mod.js
And indeed there is a file card-mod.js in config./www/plugins on my HA server

Then I upgraded to card-mod 4 a few days ago, and a file card-mod.js seems to have automatically gone to another folder
config/www/community/lovelace-card-mod

So I edited my configuration file to
/hacsfiles/lovelace-card-mod/card-mod.js

The positive news is, no dashboard has broken (or changed) what so ever.

Then I got curious, which card-mod.js is HomeAssistant ACTUALLY using.
So I removed the entire extra_module reference from my configuration.yaml, restarted HomeAssistant (even rebooted the system) and all my dashboards still work.

I have had one small issue with a card, that I was hoping to either solve with a new version of card-mod, or was going to ask as long as I know that i am actually using the latest version.
I have read some documentation and it seems there are two ways to use card-mod:

As a lovelace resource
As a front-end module.
Since I have added the extra_module line in my configuration, I assumed that I was using the front-end module.
But now that my dashboards still work when I edit the front-end module out of the configuration, I am thinking I am actually just using the lovelace resource.
How do I know to exclusively use the front-end module?

Thanks if anyone can shine a light on it. (or point me to the documentation that explains it)

Oscar1 · November 29, 2025, 6:53am

I am also confused by this line in the documentation:

/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=<12345678901>

where am i getting the last part ?hacstag=<12345678901> from ?

How do I make sure I am not “loading resources twice” ?

dcapslock · November 30, 2025, 4:05am

If you have Frontend resource this will load first. As per updated readme, here is some info on why Frontend module would be needed

1. Installing card-mod as a Frontend module via extra_module_url will provide performance improvements to non-CAST devices e.g. enhanced speed in applying card-mod to cards, especially when using card-mod themes. Installing card-mod as a Frontend module is also required if you are using card-mod to style panels of Home Assistant which are not Lovelace dashboards, as Dashboard resources are not loaded for those panels. This includes styling the sidebar in your theme for these panels.

You can have both Dashboard resource and Frontend module at the same as long as the URLs match exactly, in which case the Browser will ignore the Dashboard resource as it is the same URL. This is recommended if you use HACS as it will always update the Dashboard resource on update. Check out the readme on Performance improvements for more information.

dcapslock · November 30, 2025, 4:10am

Make sure Dashboard Resource URL and Frontend module URL match. Always restart Home Assistant after updating Frontend module URL. The good news is that once you have done this with v4, and no v3 code remains in cache anywhere, v4 will handle double running code and ignore any duplicate patching. However its best to follow the recommendations on matching URLs.

If you want to verify 100%, you can check sources in Browser developer section and make sure only one card_mod.js listed.

Oscar1 · November 30, 2025, 5:29am

Thank you very much for your repsponse.
I will need to read it more carefully a bit later.

Oscar1 · November 30, 2025, 8:56am

Am I understanding correctly that the implementation or the javascript code of both the “dashboard resource” and the “front-end module” are both references to the card-mod.js?
But that the difference is how HomeAssistant accesses the resource for an incividual client?

Thanks for link to the “Dashboard resource”
I opened it and it does show both resources:
local/plugins/card-mod.js
and
hacsfiles/lovelace-cards-mod/card-mod.js?hacstagxxxxxx

Through a file browser, I can see the first instance is last updated in May or something. The second one is just a few days old, so I am assuming its the 4.0 version.

I have tried to use the DevTool (Chrome browser) and it doesnt show much.
(Not like when I open a webpage online for example)
Under “Console” it shows lots of messages
and exactly the same number of errors
One of them is card-mod.js 1001 messages
resources 1 message
I can’t click anything to get more details

Oscar1 · November 30, 2025, 9:21am

I have (for now) renamed the card-mod.js (to OLDcard-mod.js) at the local/plugins/ location
and had already updated the url for the front-end module in my configuration.yaml.
Restarted HA

If I now go to the browser DevTool, I don’t see many of the thousands of errors anymore. But under user messages , i now do see other hacs resources besides card-mod.js

cards.js
layout-card.js
mushroom.js
etc.

under errors I still also see card-mod.js (but only with a 1 behind it, not 1000 as before)
Think this is progress

dcapslock · November 30, 2025, 9:46am

Yes. If you CAST only Dashboard resource is used. Also, as HACS updates Dashboard resource that is why it is recommended ti keep and adjust Frontend module.

You can probably delete that now. It may have been a manual install at some stage.

Sound good. The errors from before are expected when running v3 and v4 at the same time. Let me know if you need the remaining error checked.

Oscar1 · November 30, 2025, 10:12am

Thank you man… that was really usefull.

I have opened another topic for some strange behavior of a button card that I have. I was hoping the behavior had something to do with the old version of card-mod.
It wasn’t. (though the issue started after an update a few months ago.
Its a cosmetic issue.

Other than that, I think I may not use the very advanced features of card-mod that were updated in v4.0, because I find no difference between last week and now.
Except that I am now confident that I am on card-mod 4.0 , so my cosmetic issue with a button card is not due to any double loading of card-mod.js

Thanks for your help.

klogg · November 30, 2025, 11:00am

EDIT: Ignore this…

klogg · November 30, 2025, 11:17am

(Apologies for deleting the previous post but I wanted to add some info)

As the OP I’ve been watching this and whilst I thought I had got v4 installed correctly I think I am still wrongly configured.

I use YAML but My Dashboard Resource URLs are (no entry at all for card-mod)

My Frontend module URL is:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

In the Browser developer section I have this:

Is my config ok? On the one hand it feels like it might be but then I don’t understand why I have nothing in the Dashboard Resource URL and neither do I have the last part

?hacstag=<12345678901>

If not, I don’t think I’m an idiot but perhaps you could explain to me like I am ( ) what I need to do to make it so and be sure when I upgrade in future it will go as smoothly as possible.

Thanks

dcapslock · December 1, 2025, 10:09pm

Are you using HACS to update card_mod? Looks like you are as your resource URLs would suggest so. If you do use HACS then when you update card_mod with HACS, it will put back a Dashboard resource that will have URL like described. You may be deleting the HACS resource URL which is fine, but you need to remember to remove each time you upgrade. Alternatively, keep the Dashboard resource and update Frontend extra_module_url when you upgrade, as this gives you a cache busting URL for your extra_module_url.