Getting an error after latest HA update these cards are having issues loading

[Shredder5262]

Since the latest HA frontend and supervisor update i am experiencing a lot of errors, one of those things is that the horseshoe cards are not wanting to load when i first navigate to a page on the dashboard, It is not until i refresh that they load. This was not an issue prior to updating. Strangely one of the cards i had for a PC in my home just disappeared for no reason..there are some other things that have disappeared as well so the disappearance may be related to the update, but just mentioning it here.

I see this error message in the logs.

Logger: frontend.js.latest.202403070 Source: components/system_log/init.py:306 First occurred: 5:13:44 PM (3 occurrences) Last logged: 9:56:16 PM

Uncaught error from Chrome 122.0.0.0 on Windows 10 TypeError: Cannot read properties of undefined (reading 'substr') FlexHorseshoeCard._colorToRGBA (/hacsfiles/flex-horseshoe-card/flex-horseshoe-card.js:1952:24) FlexHorseshoeCard._getGradientValue (/hacsfiles/flex-horseshoe-card/flex-horseshoe-card.js:1893:33) FlexHorseshoeCard._calculateStrokeColor (/hacsfiles/flex-horseshoe-card/flex-horseshoe-card.js:1822:17) set hass (/hacsfiles/flex-horseshoe-card/flex-horseshoe-card.js:783:29) createCardElement (src/panels/lovelace/cards/hui-stack-card.ts:107:21) createCardElement (src/panels/lovelace/cards/hui-stack-card.ts:124:27) createCardElement (src/panels/lovelace/cards/hui-stack-card.ts:113:13) dispatchEvent (src/common/dom/fire_event.ts:76:7) tag.includes (src/panels/lovelace/create-element/create-element-base.ts:136:14)

[jorritdb]

This fork works!

https://github.com/imval/flex-horseshoe-card

[Al-Dek]

Works. But somehow it bothers me...

[jorritdb]

Much better, it does not pull from internet anymore:

import { LitElement, html, css, svg // } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module"; } from "./lit-element/lit-element.js"

[bazzio68]

This fork works!

https://github.com/imval/flex-horseshoe-card

Thanks, just replaced the flex-horseshoe-card.js file with this new one and it works!

[JaroslawPrzybyl]

Version 1.2 seems to be working now:

[marwonn]

It is now working again without any intervention. At least on my site... I pulled the developer release.

[gritaro]

It is now working again without any intervention. At least on my site... I pulled the developer release.

This was a very bad experience. lit-element.js must be included as a local file.

[marwonn]

It is now working again without any intervention. At least on my site... I pulled the developer release.

This was a very bad experience.

lit-element.js must be included as a local file.

You're absolutely right.

[adnovea]

It is now working again without any intervention. At least on my site... I pulled the developer release.

This was a very bad experience. lit-element.js must be included as a local file.

You're absolutely right.

+1

I tried to add the lit-element and lit-html folders but it does not work. Something is missing : lit-css ?? how to handle SVG ??

[caitotheonlypotato]

It is now working again without any intervention. At least on my site... I pulled the developer release.

This was a very bad experience. lit-element.js must be included as a local file.

You're absolutely right.

+1

I tried to add the lit-element and lit-html folders but it does not work. Something is missing : lit-css ?? how to handle SVG ??

did you look at this fork? https://github.com/imval/flex-horseshoe-card It seems to have a local implementation of lit-element

[RobertoCravallo]

Stupid question, but I don't know how to use/implement a "fork"....

[Al-Dek]

Stupid question, but I don't know how to use/implement a "fork"....

HACS > 3 dots in top right corner > Custom repositories > Repository "https://github.com/imval/flex-horseshoe-card" , Category "Lovelace" > Add.

[RobertoCravallo]

Does not work. I get a "No manifest.json file found 'manifest.json'"

[adnovea]

Al-Dek: THX for the installation details.

l'add-on s'installe mais ne fonctionne pas !

In flex-horseshoe-card.js I can see the line : from "./lit-element/lit-element.js" but there is no folder lit-element under www/community/flex-horseshoe-card. Where is the lit-element folder and how can the card can found it ? that's a mystery for me.

[RobertoCravallo]

Got it installed, but then I have the error of it not working again....

[Al-Dek]

I have the initial version "https://github.com/AmoebeLabs/flex-horseshoe-card", and it works well. The "imval" version "https://github.com/imval/flex-horseshoe-card" doesn't (with and without local "lit-element" and "lit-html" folders. So ...as is...

[RobertoCravallo]

Same here...

[adnovea]

LIT-ELEMENT installed locally is for me the most perennial solution. Here is below how I solved it - if it also works for you, thanks to report .

Lit-element module need to be installed with NPM but fortunately there is a bundle version. This facilitate the workaround for us. Download the LIT core file (see note) and renamed it as lit-element.js. Create a folder named lit-element under the Flex-Horseshoe-Card directory config\www\community\flex-horseshoe-card and put this new lit-element.js file in it. If it doesn't work, log again and clear the browser cache.

I also made it works for my other custom add-on using :

//import { LitElement, html, css, svg } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";
import { LitElement, html, css, svg } from "./lit-element/lit-element.js";

NOTE: There are 2 versions available V2 and V3. The link above points to V3 but you can also try the V2.

[RobertoCravallo]

Hi adnovea,

I do not understand how to implement this. I copied the JS into the lit-element directory. But how does horseshoe know to use this? I do not understand at all, what "bundle version" has to do with this.

How do I use the "import" function and what exactly does it do?

Thank you from Germany

[adnovea]

Change the corresponding line in config\www\community\flex-horseshoe-card\flex-horseshoe-card.js file. Here is below the first lines of the file where you can see the previous link (commented) and the local one:

/*
*
* Card      : flex-horseshoe-card.js
* Project   : Home Assistant
* Repository: https://github.com/AmoebeLabs/
*
* Author    : Mars @ AmoebeLabs.com
* 
* License   : MIT
*
* -----
* Description:
*   The Flexible Horseshoe Card.
*
* Refs:
*   - https://github.com/AmoebeLabs/flex-horseshoe-card
*   
*******************************************************************************
*/

import {
  LitElement,
  html,
  css,
  svg
// } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";
} from "./lit-element/lit-element.js"

  console.info(
...

[RobertoCravallo]

I added a ";" to the end of the line, is that correct?

} from "./lit-element/lit-element.js";

Restarted HA and everything works as before. So seems like a good fix. Thank you for your input!!

[abu9]

LIT-ELEMENT installed locally is for me the most perennial solution. Here is below how I solved it - if it also works for you, thanks to report .

Lit-element module need to be installed with NPM but fortunately there is a bundle version. This facilitate the workaround for us. Download the LIT core file (see note) and renamed it as lit-element.js. Create a folder named lit-element under the Flex-Horseshoe-Card directory config\www\community\flex-horseshoe-card and put this new lit-element.js file in it. If it doesn't work, log again and clear the browser cache.

I also made it works for my other custom add-on using :

//import { LitElement, html, css, svg } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";
import { LitElement, html, css, svg } from "./lit-element/lit-element.js";

NOTE: There are 2 versions available V2 and V3. The link above points to V3 but you can also try the V2.

Just simplify the action:

1. Download the LIT core file (see note) and put it under the Flex-Horseshoe-Card directory /homeassistant/www/community/flex-horseshoe-card/lit-core.min.js
2. Modify /homeassistant/www/community/flex-horseshoe-card/flex-horseshoe-card.js

   //import { LitElement, html, css, svg } from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";
   import { LitElement, html, css, svg } from "./lit-core.min.js";

3. Delete flex-horseshoe-card.js.gz in /homeassistant/www/community/flex-horseshoe-card/
4. Force update in hacs resource:

• Open Settings → Dashboards → Resources ( click the top-right corner 3 dots)
• Modify hacstag/hacsfiles/flex-horseshoe-card/flex-horseshoe-card.js?hacstag=20729272514

[GreyEarl]

@abu9 Thanks man! Well written, that worked perfectly.