
Homeassistant 0.107: Custom element doesn’t exist
UPDATE VOM 13.07.2020
Der Preloader ist bei keiner von mir verwendeten Lovelace Card mehr notwendig und sorgte bei mir zusätzlich für ein Einfrieren der Tabs, welcher nur durch einen Reload der Lovelace UI behoben werden konnte. Der Eintrag sollte aus der Config entfernt werden.
Mit dem Release 0.107 führt Homeassistant Änderungen am Frontend ein, die einige Benutzer mit komplexeren Lovelace Cards vermutlich verwundern werden, da diese nach dem Update nicht mehr korrekt dargestellt werden können. Es erscheint beispielsweise folgende Fehlermeldung:
Custom element doesn’t exist: hui-iframe-card.

Das Problem ist bekannt und in diesem Issue auf Github beschrieben. Der Initiator von Homeassitant rät zu einem temporären Fix mittels eines Preloaders, der auch umgehend von dem User Steven Rollason im Homeassistant Forum vorgestellt wurde und auf Github zur zur Nutzung bereitsteht.
Preloader über Custom Repository in HACS installieren
Der Preloader ist nicht standardmäßig in HACS enthalten, kann aber über ein Custom Repository hinzugefügt werden. Dazu die folgenden Schritte durchführen:
- Im Sidepanel von Homeassistant auf
HACS > SETTINGS
klicken - Im URL-Feld eintragen:
https://github.com/gadgetchnnel/lovelace-card-preloader
und als KategoriePlugin
auswählen - Speichern über den Diskettenbutton
- In HACS unter dem Reiter
PLUGINS
nachLovelace-Card-Preloader
suchen und installieren - Im Sidepanel auf
Configuration
den neuen MenüpunktLovelace Dashboards
auswählen und oben den ReiterRESSOURCES
anklicken - Über den “+”-Button eine Ressource hinzufügen und folgendes Eintragen:
URL:/hacsfiles/lovelace-card-preloader/lovelace-card-preloader.js
Ressource Type:JavaScript Module
- Über den Button
Create
die neue Ressource aktivieren.
Preloader aktivieren
Um die Lovelace UI nun mit dem Preloader nutzen zu können ist es entscheidend, ob die UI manuell mittels einer ui-lovelace.yaml
Datei verwaltet wird oder ob die Lovelace Cards direkt über das Frontend erstellt und hinzugefügt werden.
Das Prinzip ist jedoch bei beiden Anwendungsfällen gleich. Es muss ein Eintrag erfolgen, der Lovelace anweist die fehlerhaft dargestellten Cards korrekt anzuzeigen. Im folgenden Beispiel verwende ich die Fehlermeldung über eine iframe Card, die weiter oben im Screenshot dargestellt wurde.
preload:
- iframe
Sollten weitere Cards betroffen sein, muss die Liste beliebig mit weiteren Auflistungsstrichen fortgeführt werden.
Fall 1: Manuelle ui-lovelace.yaml Datei
Der Eintrag für den Preloader muss an oberster Stelle in der ui-lovelace.yaml
Datei eingefügt werden. Nach dem Speichern sollte die UI automatisch eine Änderung erkennen und einen Refresh anbieten. Falls dies nicht der Fall ist sollte manuell die Seite neugeladen werden.
Fall 2: Lovelaceverwaltung über das Frontend
Im Homeassistant Frontend oben rechts auf den Button mit den 3 Punkten klicken und Configure UI
anklicken. Anschließend erneut auf den Button mit den 3 Punkten klicken und die Option Raw configuration editor
auswählen. Nun ebenfalls ganz oben vor allen anderen Einträgen die preload-Anweisung einfügen und speichern.
Anschließend sollten alle Lovelace Cards wie gewohnt dargestellt werden.