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.

Oscar1 · February 5, 2026, 9:57am

Sorry to revisit a months old topic.
This is getting really annoying. I have updated to card-mod 4.2.0
I HAVE carefully checked that the resource in my configuration.yaml is exactly what it is in the resources:

hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524420

Then I restarted HA, cleared browser cache, but no matter I open a dashboard in chrome browser on a PC or through the app on a mobile phone.
I ALWAYS get a warning:

Card-mod duplicate patch warning

CARD-MOD (4.2.0): hui-card already patched by 4.2.0!

Card-mod likely loaded twice with different resource URLs. Make sure all card-mod resource URLs including hacstag match EXACTLY. Also check other custom elements including cards and themes which may load card-mod.

Is there anywhere I can trace, find and remove the duplicate?
I follow the instructions to a T, but the problem persists.

dcapslock · February 5, 2026, 10:11am

Have you cleared cache of device? You can either do this via debug in Companion App, or you can use the newly included action that card-mod provides (see README), included below for reference.

If at any time you need to clear the Home Assistant Application cache, which is used in addition to Browser cache, starting with Version 4.2.0 you can use a custom action to clear the Home Assistant Application cache and reload the Browser. This can be very convenient especially for devices where the option is hidden in a debugging menu and will clear more than just the application cache (e.g. localStorage which clears out many stored items like Browser Mod Browser ID).

The action can be executed using fire-dom-event with key card_mod with action: clear_cache. This can be used on any card that supports the fire-dom-event action which includes all standard Home Assistant cards.

Example button to clear cache and reload.
show_name: true
show_icon: true
type: button
name: Clear Frontend Cache
tap_action:
  action: fire-dom-event
  card_mod:
    action: clear_cache

Oscar1 · February 5, 2026, 10:36am

Thanks for the button. I did not know that.
I added it to a view and clicking it refreshes the view.
Unfortunately, when I click the reload button on the browser, the warning re-appears.

Oscar1 · February 5, 2026, 10:50am

I have “redownloaded” some of the other HACS repositories. Then restarted HA (as required)
Now the warning is gone. I am not 100% sure if it us related, or just magic.

dcapslock · February 5, 2026, 10:53am

Did you restart after originally adjusting extra_module_url? Anyhow good to hear all going well now.