ildar170975
commented
6 months ago Consider checking for already existing issues before reporting a new one.
Closed gitmesomepizza closed 6 months ago
ildar170975
commented
6 months ago Consider checking for already existing issues before reporting a new one.
Wuestengecko
commented
6 months ago I came here because I thought I had this as well, until I saw you claim it doesn't happen on Firefox (which I use). This led me to force-reload with Ctrl+F5 instead of relying on HACS' own "do you want to reload now?" prompt, and that indeed fixed the issue, so on my end it probably just was a weird caching issue after all. Could you maybe try Ctrl+F5 as well? (It works the same way in Chromium.)
zeisingmi
commented
6 months ago Merry Christmas! I have the same issue with my devices. Version 3.3.1 is not working on chromium based browsers like "Fully Kiosk Browser" or "Home Assistant Mobile App". But in my case also firefox browsers are affected. I thoroughly cleared all cached content on all browsers. Downgrade to version 3.3.0 solves the problem immediately. Error messages are same as described above.
gitmesomepizza
commented
6 months ago Merry Christmas! I have the same issue with my devices. Version 3.3.1 is not working on chromium based browsers like "Fully Kiosk Browser" or "Home Assistant Mobile App". But in my case also firefox browsers are affected. I thoroughly cleared all cached content on all browsers. Downgrade to version 3.3.0 solves the problem immediately. Error messages are same as described above.
I was using an outdated version of Firefox, and sure enough, after updating Firefox, the issue is now affecting FF as well. So please disregard my statement of this being a Chromium specific issue. Sorry about that!
I came here because I thought I had this as well, until I saw you claim it doesn't happen on Firefox (which I use). This led me to force-reload with Ctrl+F5 instead of relying on HACS' own "do you want to reload now?" prompt, and that indeed fixed the issue, so on my end it probably just was a weird caching issue after all. Could you maybe try Ctrl+F5 as well? (It works the same way in Chromium.)
I ensured that all the caches were cleared and that 3.3.1 was running in the browser both before and after updating Firefox. So it shouldn't be a caching issue.
Wuestengecko
commented
6 months ago I tried messing with it a bit more, and it seems to randomly work about half the time on card-mod 3.3.1, and it's completely broken the other half. I don't really see a pattern there. However, when it doesn't work, it spams the console with hundreds of errors, which slows the entire browser tab down dramatically. (It only gets worse while the dev tools are open.)
InstallTrigger sollte nicht mehr verwendet werden und wird in Zukunft entfernt werden. constants.js:50:14
CARD-MOD 3.3.1 IS INSTALLED card-mod.js:1:50553
Uncaught TypeError: Illegal constructor.
n card-mod.js:1
_ card-mod.js:1
r card-mod.js:1
_ card-mod.js:1
n card-mod.js:1
_ card-mod.js:1
o card-mod.js:1
C scoped-custom-element-registry.js:388
t scoped-custom-element-registry.js:236
t card-mod.js:1
d card-mod.js:1
S card-mod.js:1
v/$/ slider-entity-row.js:1:61420
FOLD-ENTITY-ROW 2.2.0 IS INSTALLED fold-entity-row.js:78:255
WEATHER-RADAR-CARD
Version 2.1.0 weather-radar-card.js:1291:869
banner-card: 0.12.0 banner-card.js:162:2393
MeteoalarmCard 2.6.0 meteoalarm-card.js:816:11
SHUTTER ROW 0.3.5 shutter-row.js:1413:9
The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information. config-template-card.js:329:12
CONFIG-TEMPLATE-CARD
Version 1.3.6 config-template-card.js:735:9
MyJDownloader-Card
Version 1.2.0 myjdownloader-card.js:55:739
⚡ Power Flow Card Plus v0.1.8.1 is installed power-flow-card-plus.js:1:24585
SCHEDULER-CARD
Version: v3.2.12 scheduler-card.js:1826:321
🍄 Mushroom 🍄 - 3.2.2 mushroom.js:3557:84
APEXCHARTS-CARD v2.0.4 apexcharts-card.js:835:75178
TailwindCSS Template Card
Version 3.1.1
Star it at http://github.com/usernein/tailwindcss-template-card! tailwindcss-template-card.js:77:11388
PLOTLY-GRAPH 3.3.4 production plotly-graph-card.js:2224:838
(After that, the stack trace from above just keeps repeating endlessly.)
InstallTrigger sollte nicht mehr verwendet werden und wird in Zukunft entfernt werden. constants.js:50:14 CARD-MOD 3.3.1 IS INSTALLED card-mod.js:1:50553 MULTIPLE-ENTITY-ROW 4.5.0 multiple-entity-row.js:1:26787 SLIDER-ENTITY-ROW 17.4.1 IS INSTALLEDslider-entity-row.js:1:61420 FOLD-ENTITY-ROW 2.2.0 IS INSTALLED fold-entity-row.js:78:255 WEATHER-RADAR-CARD Version 2.1.0 weather-radar-card.js:1291:869 banner-card: 0.12.0 banner-card.js:162:2393 SHUTTER ROW 0.3.5 shutter-row.js:1413:9 The main 'lit-element' module entrypoint is deprecated. Please update your imports to use the 'lit' package: 'lit' and 'lit/decorators.ts' or import from 'lit-element/lit-element.ts'. See https://lit.dev/msg/deprecated-import-path for more information. config-template-card.js:329:12 CONFIG-TEMPLATE-CARD Version 1.3.6 config-template-card.js:735:9 ⚡ Power Flow Card Plus v0.1.8.1 is installed power-flow-card-plus.js:1:24585 MyJDownloader-Card Version 1.2.0 myjdownloader-card.js:55:739 SCHEDULER-CARD Version: v3.2.12 scheduler-card.js:1826:321 MeteoalarmCard 2.6.0 meteoalarm-card.js:816:11 🍄 Mushroom 🍄 - 3.2.2 mushroom.js:3557:84 TailwindCSS Template Card Version 3.1.1 Star it at http://github.com/usernein/tailwindcss-template-card! tailwindcss-template-card.js:77:11388 APEXCHARTS-CARD v2.0.4 apexcharts-card.js:835:75178 PLOTLY-GRAPH 3.3.4 production plotly-graph-card.js:2224:838
I also tried redownloading it through HACS, but that didn't make a difference.
Considering that support for older browsers which I don't care about is the only new feature in 3.3.1 vs. 3.3.0, I'll simply revert back for now.
gitmesomepizza
commented
6 months ago (It only gets worse while the dev tools are open.)
I was noticing similar behavior with the dev tools open.
Another thing I noticed in the dev tools, is that there is a second web request to get card-mod.js when the issue occurs. When the page/card-mod does work there is only one request to get card-mod.js but when the issue happens there is a second request (XHR) to get card-mod.js initiated by a "5825.lVYaoyzmuqA.js". Not sure if this is relevant, but figured it may help someone investigate.
thomasloven
commented
6 months ago There's been an update in how the scoped customElements registry works, it seems, which affects the timing of things.
I have reproduced the problem (but only in firefox) and have a fix ready for the upcoming 3.4.0. Give me a day or two for testing, and I'll have a release.
reprogerman
commented
6 months ago It happened to me that with the latest version it gave me errors in the registry, I have returned to version 3.2.4, so far it is fine.
thomasloven
commented
6 months ago 3.4.0 has been released. That should fix this.
Scoop2389
commented
6 months ago Hello everyone, My instance of card mod was previously on version 3.3.1 without any issue, but after updating to version 3.4.0, this issue popped up. When I downgrade back to version 3.3.1, the issue disappears.
EDIT: I removed console logs that appeared in both version 3.3.1 and 3.4.0. The only difference between version 3.3.1 and 3.4.0 is the absence of this console log:
card-mod.js?hacstag=190927524331:1 CARD-MOD 3.3.1 IS INSTALLED
Fr3di
commented
6 months ago I have the same issue as @Scoop2389 on Chrome 120.0.6099.109. Can't see any errors but card-mod v3.4.0 doesn't work and had to downgrade to v3.3.1
andiukas
commented
6 months ago v3.4.0 version not help :( last update Chrome 120.0.6099.110
Fr3di
commented
6 months ago Thx to this topic https://github.com/thomasloven/lovelace-card-mod/issues/329 I have found that my styling in few places was wrong and it made me think that v3.4.0 is not working which wasn't correct. After fixing my code it works fine with card-mod v3.4.0. Please check your code specifically for missing card_mod key and wrong indentation:
I.e. I had:
- type: custom:floorplan-card
style: |
ha-card {
max-width: 160vh;
margin: 0 auto;
background: none;
box-shadow: none;
}when it supposed to be like below (card_mod key added):
- type: custom:floorplan-card
card_mod:
style: |
ha-card {
max-width: 160vh;
margin: 0 auto;
background: none;
box-shadow: none;
}3.4.0 has been released. That should fix this.
Can confirm that 3.4.0 has fixed the issues from my original post! Thank you!
My Home Assistant version: 2023.12.3
My lovelace configuration method (GUI or yaml): YAML
What I am doing: Loading a page with card-mod tweaks on Chrome/Chromium
What I expected to happen: card-mod works
What happened instead: card-mod does not work
Minimal steps to reproduce: Upgrade to 3.3.1 Open Chrome/Chromium to Home Assistant page that utilizes card-mod
⚠️ Please note that downgrading to 3.3.0 resolves this issue ⚠️
⚠️ Also, this issue does not happen in Firefox ⚠️Error messages from the browser console:
Also
By putting an X in the boxes ([]) below, I indicate that I:
[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.