Card-mod 4.2.0 - Duplicate patch warning - discussion

Share your Projects! Dashboards & Frontend
1

This post is taken form a comment of mine on card-mod GitHub issue [HACS]: CARD-MOD (4.2.0): hui-card already patched by 4.2.0! · Issue #582 · thomasloven/lovelace-card-mod · GitHub and modified to suit forum.

Below I include some discussions on caching, a general section on Home Assistant ‘Frontend’ caching, a Performance improvement timeline which highlights investigative work on how duplicate patching gives rise to card-mod issues, and a FAQ to answer some common questions on the topic and how it my be improved.

While I am a contributor to Home Assistant custom cards and integrations, I also run Home Assistant for my home with other non-technical Apple iOS Companion App users, including using my own iOS devices with Companion App.

With respect to caching, especially for Companion App, if you follow the card-mod recommendations, you should not get future warnings after upgrade. However, as caching is a detailed topic, your environment may give rise to scenarios needing more attention.

The card-mod upgrade process I use is as follows. With this my home users do not generate any warnings. I use HACS and extra_module_url.

  1. Upgrade via HACS. If you say yes to reload you will get one warning as already the Resource URL is different. I generally do reload and go and dismiss the notification. This confirms that HACS has loaded the updated card-mod correctly.

  2. Straight away without delay, get Dashboard resource URL and update configuration.yaml extra_module_url for card-mod.

  3. Restart Home Assistant.

Home Assistant ‘Frontend’ caching

Home Assistant uses a service worker that uses Browser cache storage. It calls the Cache storage file-cache (there are some others as well). This is not to be confused with the Browser’s general cache which will still be used if a request is not in file-cache. I have included a screenshot below to show how you can review what is in this cache. These are the caches that the new card-mod clear_cache action clears, and also these same caches are also cleared (as well as localStorage etc.) when you use the Troubleshooting section of Companion App.

Image
Image1634×308 41.1 KB

Next, Home Assistant also uses a single page style architecture, updating the relevant sections when you go to different views/dashboards. So when you first go to say ‘/lovelace’ (open Companion App after some time, reload page on desktop etc.) it will get the html file served at that url. When you then view a different dashboard, no new html file is retrieved, Home Assistant replaces the view, depending on what it is. e.g. when you go to a different dashboard, a new lovelace panel will be created by partial-panel-resolver, swapping out the previous lovelace panel. You can review this by manually clearing the file-cache using Browser developer tools, browse some Dashboards, and see that the only Dashboard url in the file-cache will be the one you started on.

Next, for resources, those which are Dashboard resources are handled dynamically, and will be refreshed and loaded asyc by document <script> tags, a separate one for each script. However those loaded by extra_module_url are concatenated together in one JS script file in browser <head>. (Aside, this is also why if one extra_module_url causes a load error, all may be affected).

Noting here that a Browser will NOT load any JS file again that has the EXACT same URL including search tags (hacstag etc.), but WILL load a JS file again if it IS a different URL - the Browser has no knowledge of what the file is by URL so just blindly thinks it is different and needs to load it.

Following on, Home Assistant only updates the extra_module_url section of the page served after restart. There are scenarios here were the initial dashboard page in file-cache is used and not refreshed from Home Assistant. This is the the scenario that then needs manual intervention on the Browser/device. My understanding of what happens here is based on findings to get Browser Mod integration to the point it knows the Dashboard page in file-cache is out of date, and is possibly where further improvements with card-mod and/or Home Assistant can be made. Thinking of improvements for card-mod, I am not sure if this would be possible without a ‘master’ telling the Browser what card-mod version it should be running. In Browser Mod case the integration (backend) knows the version and tells Frontend JS what to expect, and if not that version, to put up a toast prompt to reload. This would be the aim for card-mod in some way - perhaps using HACS integration call if available, or the update sensors HACS creates, using it as ‘master’ version.

Performance improvement timeline

  • Around June/July 2025 I started to investigate why users were getting Performance warning issue, weird errors etc. that could not be put down to any bugs/issues.

  • On investigation I found that Browsers will indeed load JS files twice if not exact matching URL. No glitch here, this is 100% true, tried and tested.

  • I started to assist users who were having strange issues, card-mod’s working/not on page refresh etc, to make sure their URLs matched and users were finding this fixing their issues. (Particularly in v3.x where duplicate patching actually run duplicate code, hence the loss of card_mod in visual editor for entities, for example, due to the patching code actually running twice).

  • I was able to become a contributor/maintainer for card-mod (thanks Thomas) and so went about on the journey to rectify this issue.

  • First, v4.0.0 stopped duplicate patching code running, though as card-mod is only Frontend, whatever is loaded first ([cached version] of extra_module_url) wins out (with any 3.x versions at this time still merrily doing like they did before, causing duplicate patching issues).

  • This helped, though assisting users through 4.1.0 and 4.2.0 beta periods, it was clear that there were still incorrect configs, and it was hard to tell what was what as which ever version is loaded as a module, and could be a previous 4.x cached version, will run the pactching code, with old code being run, even though users have updated to the latest version.

  • Come along 4.2.0, and the duplicate patching introduced tracking version along with the console and Frontend notification warning and updated README.

FAQ

Why have this (annoying) warning?

This is a good question and everyone wishes to not have irrelevant warnings. Using the case of a Cloudflare issue noted in the GitHub thread, it shows it does matter, even if the version is the same. So knowing there is an issue to fix means first making sure that is addressed before chasing issues further down rabbit holes, when the issue all along is duplicate card-mod resources running.

Can this be better?

Yes, indeed. Possible improvement would be for card-mod to know the ‘master’ version and then prompt for cache refresh like Browser Mod. It’s a point in time to work out the best way for card-mod to know the ‘master’ version for the Home Assistant setup. This could be done by making card-mod an integration with a backend part to handle versioning etc. Then in effect it would become like Browser Mod in the way it manages its resources. The other way would be to use HACS, if available, to query the card-mod ‘master’ version and for the Frontend to handle appropriately. I will likely go this path first as it is much easier and if works, will be non breaking, non impacting and hopefully get to a much better position. If anyone reading this thinks they can code this approach, please do so and submit a PR.

Do I not get what warnings etc mean for admins and their users?

I 100% get it. I have non-technical users in my household. This issue is a journey and hope to get it even further improved. Having issues solved by knowing it is duplicate patching, rather than chasing otherwise, gives me more time to get this duplicate resource issue to a better point, as well as more time for new features and other improvements.

Does card-mod need more contributors (Dorothy Dixer here)?

Absolutely. There may have been a period when contributors got tired as reviews were not happening. Should any contributor wish to contribute a PR I am ready to review without delay.

9 Likes
2

Thanks for the detailed post. I read through the material but I confess a lot of its content is beyond my understanding.

I sought some information in a previous post on this topic and applied the changes you suggested in your reply.

This is the frontend configuration I have in my configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

  # added for the bambulab printer card
  extra_module_url:
    # old entry - /local/community/lovelace-card-mod/card-mod.js
    - /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524420

I have this in my ressources list:

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

I thought that may have addressed the issue, but I noticed another card-mod duplicate patch warning this morning.

2 Likes
3

ok, what’s the fix. like i’m a 5 y/o please

1 Like
4

Check out lovelace-card-mod/README.md at master · thomasloven/lovelace-card-mod · GitHub.

Specifically, its likely that you have extra_module_url in your configuration without hacstag, so it won’t be matching your Dashboard resource url. So first check what you Dashboard url is (either try Link to Dashboard resources – My Home Assistant or use instructions HERE). For 4.2.0 it should be /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524420. Once confirmed in Dashboard resource, go to edit your configuration.yaml and update extra_module_url. Restart Home Assistant. Refresh caches including Frontend cache on any devices running Companion App.

2 Likes
5

i have to do that every time I update card-mod? Or do I just delete it from config yaml?

6

Technically, you don’t have to add the extra_module at all. As shown in the github, there are features of card-mod that greatly benefit by loading the extra_module for the frontend, but it’s not required, and I would guess most users don’t do enough custom styling to even warrant it’s use. YMMV

To answer your question, you will need to update the extra_module path if the resource path changes to match the resource path, which can happen from updating.

1 Like
7

ok, i just commented it out, rebooted, and all is well. thanks!

1 Like
8

Good point. Currently a lot of users have set it in the past due to the warning that comes up in console. Perhaps its time to remove that warning?

9

Maybe… but should it be removed, perhaps include an addendum in the github wiki with a brief explanation of what kind and to what extent the styling would benefit from adding it. Or in other words, a recommendation of when to use.

10

The README includes that information already, though it could be reordered I think with less prevalnce the whole performance section.

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.

1 Like
11

LOL touché, it does indeed. Yes, I think a reorder would help clarify.

1 Like
12

I feel as though the explanation could do with being dumbed down even more. As another use said, treat me like a 5 year old :slight_smile:

1 Like
13

@Orange-GT3 I welcome any contribution here and in documentation PRs. So far there has been great construction, thank you @mmstano.

I will leave initial post as is for those who do want the detail as I do often get asked for such detail as well. So together we can cover off all bases. Thank you for your input.

1 Like
14

Thanks a lot for the infirmation and the details next to the main card_mod topic. I’m pretty sure, that those caching topics e.g. on iPad companion is all correlated to my with problems like the width problem from these days in browser mod thread and my even older problem, that after re-opening of companion after some time, most of the time 50-60% oder my Icons in the dashboards are not shown and only after page refresh. Curious cache topics.

This is one of the things I didn’t get completely. If you fixed the duplicate patching, what waa there before and the main problem, why is there then still any problem at all and the need to harmonize the urls?

1 Like
15

Good question. The issue is that an older version may win out, so while you think you have updated, you would be running old patching code and a mixed card-mod situation. Given that most users who implemented early recommendations to have extra_module_url without any tag, and it runs first, there is a good chance old cached code will run.

When the patch warning currently says patching already done by ‘unknown’ this is an older version 4.x version. If the patch warning says already patched by 4.2.0 it means same version running twice. As per README, this is still a situation to rectify as it could easily turn into a situation of running old code.

1 Like
16

Ah. Now I got it.

1 Like
17

I will update the notes to make this clear that while v4.0.0 stopped duplicate patching actually running code twice, there is still the issue of the possibility of old code being run first, and new code can only note the this sutuation with the current notificatation.

18

Fair enough, but I’d need to understand it first before suggesting any changes. Perhaps expand on the non-CAST bit. I have no idea what that’s all about.

1 Like
19

CAST is Google Cast - Home Assistant. I have not delved into much myself as I don’t have hardware to test. CAST does not load the same as regular Home Assistant web/companion apps, so can only use card-mod with a Dashboard URL and not extra_module_url only.

20

i have it like:

frontend:
  themes: !include_dir_merge_named themes 
  extra_module_url:
    - /local/community/lovelace-card-mod/card-mod.js

But where do you guys get that hacstag ??

1 Like