dimmer-button no longer works with latest HAOS?

[BenBergman]

I just updated my Home Assistant OS and shortly after noticed that my dimmer-buttons were no longer working and instead showing Custom element doesn't exist: dimmer-button.

I had the who repo cloned into /www/dimmer-button/ and /local/dimmer-button/dimmer-button.js as a dashboard resource file. I noticed that the presence of git metadata was preventing the directory from opening in the Home Assistant file editor, so I also tried copying dimmer-button.js to just /www/dimmer-button.js and changing the dashboard resource to /local/dimmer-button.js. I also tried using the more recent version of the file from the dev branch.

It is entirely possible I did something else to screw this up, but I can't for the life of me figure out what, so I'm wondering if maybe there is an incompatibility with the latest OS updates?

[BenBergman]

Okay, I'm 90% sure the issue is that dimmer-button loads lit-html dynamically. The browser dev console has a bunch of these errors:

Loading module from “https://unpkg.com/[email protected]/lib/shady-render?module” was blocked because of a disallowed MIME type (“text/plain”).
[logs](http://homeassistant.local:8123/config/logs)
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://unpkg.com/[email protected]/lib/shady-render?module. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “https://unpkg.com/lit-html@%5E1.0.0/lib/shady-render?module”.

[BenBergman]

Okay, I found a fix. Download https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js and put it next to dimmer-button.js. Then change line 12 of dimmer-button.js from

} from "https://unpkg.com/[email protected]/lit-element.js?module";

to

} from "./lit-core.min.js";

and refresh the page (might need to clear cache).

[ichwars]

Okay, I found a fix. Download https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js and put it next to dimmer-button.js. Then change line 12 of dimmer-button.js from

} from "https://unpkg.com/[email protected]/lit-element.js?module";

to

} from "./lit-core.min.js";

and refresh the page (might need to clear cache).

Thanks for the tip. Unfortunately it doesn't work for me. Error message remains.

[BenBergman]

Are you getting the error in the browser or the mobile app?

On Android, you need to long press the app icon, click "App info" > "Storage and cache" > "Clear cache" for the fix to apply. I'm sure there is something similar for iOS.

Or browser, I think ctrl + shift + R is sufficient to force the page to re-download the javascript files.

If that still doesn't work, can you share the errors from the browser dev console? On Firefox you can bring it up with ctrl + shift + I and select the console tab.

[crankycowboy]

Okay, I found a fix. Download https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js and put it next to dimmer-button.js. Then change line 12 of dimmer-button.js from

} from "https://unpkg.com/[email protected]/lit-element.js?module";

to

} from "./lit-core.min.js";

and refresh the page (might need to clear cache).

@BenBergman when you say "put it next to 'dimmer-button.js' what do you mean?

[BenBergman]

@BenBergman when you say "put it next to 'dimmer-button.js' what do you mean?

If you put dimmer-button.js in homeassistant/www/, put lit-core.min.js in the same folder. I had cloned all of the dimmer-button repo into www, so my lit-core.min.js is in homeassistant/www/dimmer-button/. No need to add it as a dashboard resource like you did for dimmer-button.js.

[ichwars]

Are you getting the error in the browser or the mobile app?

On Android, you need to long press the app icon, click "App info" > "Storage and cache" > "Clear cache" for the fix to apply. I'm sure there is something similar for iOS.

Or browser, I think ctrl + shift + R is sufficient to force the page to re-download the javascript files.

If that still doesn't work, can you share the errors from the browser dev console? On Firefox you can bring it up with ctrl + shift + I and select the console tab.

No matter what I tried, it always reloaded the old version in HA. I have now created my “own” version and adopted your changes. I then reinstalled it via HACS and now it works. Thanks again for your tip.

[crankycowboy]

Are you getting the error in the browser or the mobile app?
On Android, you need to long press the app icon, click "App info" > "Storage and cache" > "Clear cache" for the fix to apply. I'm sure there is something similar for iOS.
Or browser, I think ctrl + shift + R is sufficient to force the page to re-download the javascript files.
If that still doesn't work, can you share the errors from the browser dev console? On Firefox you can bring it up with ctrl + shift + I and select the console tab.

No matter what I tried, it always reloaded the old version in HA. I have now created my “own” version and adopted your changes. I then reinstalled it via HACS and now it works. Thanks again for your tip.

@ichwars I'm having the same issue. I did as @BenBergman suggested and put the lit-core.min.js in the same folder as my dimmer-button. I edited line 12 as was suggested and it still doesn't work. Can you please explain what you mean when you say you "created your own"? I'd like to try whatever you did to resolve the lingering error.

[ichwars]

@crankycowboy I have created a fork version here and incorporated the changes made by BenBergman. I then uninstalled the original version of dimmer-button in HACS and installed “my” fork version under Custom Repositories. HA restarted and works.

[crankycowboy]

@ichwars thanks, that makes sense. I did the same, I modified the dimmer-button.js and also uploaded the lit-core-min.js file. When I add the custom repository, do I just point that to the page of my fork and then what do I select as the "type"? Sorry for all the questions, but greatly appreciate the help.

[ichwars]

@crankycowboy No problem. Simply select Dashboard as the type.

[BenBergman]

Ah, that probably explains the difference between our installs. I didn't install via HACS since the install directions for dimmer-button say to manually copy in the dimmer-button.js file. I just assumed it wasn't HACS compatible and did the manual install method. Maybe HACS somehow caches something that a manual install doesn't?

[djreg]

@ichwars thanks for this fix, use this a lot to control volume for speakers, lost without it :)

[ichwars]

@BenBergman I must have missed that with the copying. xD
You seem to be right with your assumption that HACS stores something temporarily. But without your fix, we wouldn't have reached our goal either. Thanks again for that!

@djreg The credit goes to BenBergman, but I'm glad if I could contribute to the solution. I use it for my lighting. Without it I would have had to tinker with everything again.

[crankycowboy]

@ichwars I have no idea what I'm doing wrong. I'm still getting the error. I even removed the dimmer button, removed my custom repository. Made sure the folder was gone. And then added your repository which added fine. Restarted Home Assistant and I'm still getting the same error message. Any idea what I may be doing wrong? Sorry (again) for the headaches.

[BenBergman]

@ichwars I have no idea what I'm doing wrong. I'm still getting the error. I even removed the dimmer button, removed my custom repository. Made sure the folder was gone. And then added your repository which added fine. Restarted Home Assistant and I'm still getting the same error message. Any idea what I may be doing wrong? Sorry (again) for the headaches.

Are you seeing the error in the browser and the app? If you have the issue in the browser, can you paste any errors from the browser dev console here? Maybe there is something useful hiding in there.

You could also try installing dimmer-button.js and lit-core.min.js without HACS (remove the HACS version first probably) as described in the readme of this repo with my tweaks above if you haven't already.

[ichwars]

@crankycowboy The lit-core.min.js is not copied with your version. Although it is included in the archive, it is missing after installation in the www/community/dimmer-button folder. No idea why. But you can copy it in manually. After that it should work. just tested.

[crankycowboy]

@ichwars , first let me say thank you for taking the time to try to help. You've spent way more time on this than you should have had to. I guess I'm missing something. I tried manually adding it. Same error (on all devices). I then deleted my repository and just forked yours. I reinstalled via Hacs...same error (and verified all files are there). I've refreshed, restarted and closed my VM and restarted. Same error. I then manually deleted the resource in resources and manually added it. Same error. Any clue what could be going on? Picture for reference

[ichwars]

@crankycowboy No problem. But they didn't have to fork “my” version again. Just copy the link in HACS and install it. A basic question: Are you sure you have deleted the browser cache? Or checked whether the files: dimmer-button.js & lit-core.min.js are also present under www/community/dimmer-button?

Another possibility would be to click RMB on the page where the error occurs and select Investigate (Chrome & Firefox) then click on Console and search for dimmer-button.js. And post the error message here.

[crankycowboy]

@ichwars I know I didn't have fork your repository. It's just nothing else was working so I was willing to try anything. Yes, dimmer-button.js and lit-core.min.js are present under www/community/dimmer-button.

Attached are the errors I'm getting. It looks like maybe it's having a problem loading the lit-core.min.js file?

[crankycowboy]

Ok, I got it. I did as @BenBergman suggested and manually added it in resources opposed to letting HACS do the entry. thank you for all the help.