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:

1. Im Sidepanel von Homeassistant auf HACS > SETTINGS klicken
2. Im URL-Feld eintragen: https://github.com/gadgetchnnel/lovelace-card-preloader und als Kategorie Plugin auswählen
3. Speichern über den Diskettenbutton
4. In HACS unter dem Reiter PLUGINS nach Lovelace-Card-Preloader suchen und installieren
5. Im Sidepanel auf Configuration den neuen Menüpunkt Lovelace Dashboards auswählen und oben den Reiter RESSOURCES anklicken
6. Über den „+“-Button eine Ressource hinzufügen und folgendes Eintragen:
   URL: /hacsfiles/lovelace-card-preloader/lovelace-card-preloader.js
   Ressource Type: JavaScript Module
7. Ü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.