Lovelace YAML migrate - Custom element doesn't exist

[champ26 (Champ)]

I am having the same problem. after update, the resource section of the ui-lovelace.yaml disappears. if i try to manually add it in the raw config editor, it doesn’t save. not sure what to do. the developer docs for 0.85.0 seem to be depricated and do not reflect what is happening. (the 0.85.0 docs still say to use ui.lovelace.yaml, which the devs say we shouldn’t be doing anymore).

so i’m at a loss.

i’ve been trying to keep things as vanilla HA as possible (transitioned, from the custom button card to the new entity-button card) but for custom dimmer sliders and the monster card, they really are unique and easy to use. sucks those are the tow most used items i use in HA and can no longer use it without having to rollback

[champ26 (Champ)]

reported as a bug in the github

[champ26 (Champ)]

i found a workaround until we’ll find out whether resources can be added/edited from the webUI.

looks like they did allow for a yaml only mode. so i copied my edited raw-config from the web ui, created a new ui-lovelace.yaml with my resources back in and saved that.

then in configuration.yaml, i added the new lines to enable yaml only mode for lovelace and restarted HA.
lovelace:
mode: yaml

Now HA is reading those custom cards resources and rendering appropriately. i like not having to do an ssh or putty session to update lovelace so will be super happy once these little things get resolved. guess i’m still stuck editing text files over ssh in the meantime.

[DavidFW1960 (David)]

Which version of HA? This was fixed in 0.85.1
You may need to delete all cookies and website data before it works again though but it was definitely fixed in 0.85.1. I am not on 0.86.0b3 and it is fine in there as well.

[radinsky]

I did as you suggesting and tried on other computer (never was used to access my hassio) still getting the same.

[DavidFW1960 (David)]

You don’t even have a .storage/lovelace though do you? When it asked if you wanted to control your UI did you say yes?

This is a different problem to not being able to edit in raw mode and losing custom resources.

[radinsky]

Never asked me regarding controlling the UI…

[DavidFW1960 (David)]

Do you have a ui-lovelace.yaml in /config? Are you even using Lovelace or still the old states pages?

[radinsky]

yes and yes (I didn’t know that custom element could be related to the “old states pages”)

[kslb (KSLBe)]

The solution for me was:

PREPARATION:
*Do install Google Chrome (if you still do not use it).
*Check that HA version is at least 0.85.1.
*Check all your resources if you find any newer version, in case that you do find newer version do make firstly update custom resources before continue migration.
*Do complete backup of “config” folder of Home Assistant to external drive.
*Do have shortcut for Home Assistant in Google Chrome.

1:
Delete “lovelace” file under:
“\config.storage”

2:
Then change configuration.yaml file so that YAML mode is disabled.

3:
Then very IMPORTANT!
Make restart Home Assistant (in normal mode - like in past, so do NOT clear cache or change something in browser - do it in normal mode…)

4:
Then very and most IMPORTANT!
Open Home Assistant in Incognito mode (Google Chrome) - right click on shortcut and open in Incognito mode:

5:
After you will log in to Home Assistant (HA) as root user copy paste of your lovelace content file (ui-lovelace.yaml).

Best practice is to open in Notepad++, use Crtl+A and Ctrl+C and then Ctrl+V in RAW editor in HA.

6:
Save copied text in RAW editor. Wait about 30-60 seconds, save it again. Close editor.

7:
Check if lovelace exist in “\config.storage” and also you can delete or just rename your old used file “ui-lovelace.yaml” (I renamed it to “_ui-lovelace.yaml”).

8:
Then check if everything is working fine. Then you can close Google Chrome Incognito mode.

9:
In every browser where you use Home Assistant clear cache browser and reopen HA, then everything should be fine.

MY CUSTOM RESOURCES (with links to check if something new is so that you can update it):

Lovelace: Gauge card

Gauge card Due to popular request, I’ve created a sample card to better display sensor information visually on an interface. This is not the first of it’s kind as I’ve seen after that other people already done similar things in the past: Gauge Chart Most important thing of this card is that this it’s standalone using mostly CSS without extra javascript libraries. One other important thing is that it allows custom scaling with parameters to allow using it together with stack cards. It’s based o…

https://github.com/ciotlosm/custom-lovelace/tree/master/gauge-card

  - url: /local/gauge-card.js?v=0.2.0
    type: js

Custom Dark Sky Animated Weather Card

EDIT: Mar 03, 2019 Dark Sky Weather Card [image] The Dark Sky Weather Card provides current and forecasted weather conditions using the Dark Sky platform. You configure the card by passing in sensor entities from the Dark Sky Sensor platform. The card is very customizable. You can configure many aspects of it’s look and feel as well as which specific content to show by passing in customization flags and defining optional sensors. Content can also be rearranged if desired. Hovering over a f…

  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js

GitHub - thomasloven/lovelace-toggle-lock-entity-row

  - url: /local/toggle-lock-entity-row.js?v=1
    type: js

GitHub - kalkih/mini-graph-card: Minimalistic graph card for Home Assistant...

  - url: /local/mini-graph-card-bundle.js?v=0.1.0
    type: module

GitHub - rdehuyss/homeassistant-lovelace-google-calendar-card: A calendar...

  - url: https://unpkg.com/[email protected]/moment.js
    type: js

GitHub - rdehuyss/homeassistant-lovelace-google-calendar-card: A calendar...

  - url: /local/custom_ui/calendar-card/calendar-card.js?v=1.0.1
    type: module

  - url: /local/custom-lovelace/swipe-card/swipe-card.js?v=2.0.0
    type: module

GitHub - thomasloven/lovelace-slider-entity-row: 🔹 Add sliders to entity cards

  - url: /local/slider-entity-row.js?v=1
    type: js

[radinsky]

Thanks for such detailed guide…
but
It not resolved the issue for me :
It did finally created the lovelace storage, but still got errors with button card and mini player…
I’m giving up for now cause I’m barely using HA gui at all, I’m fully with tileboard…

[radinsky]

Ok, after upgrading to 0.86.1 everything is working again

[sacha81 (Sacha Thomet)]

I still have the issue with 086.4 and it’s running on docker (on a synology) the lovelace file contains the ressources info

[radinsky]

do you have the storage/lovelace ? have you tried removing it and restarting HA?

[sacha81 (Sacha Thomet)]

worked - need to make the config change I made - but calendar is fine now. THANKS!

[HeadHodge]

@DavidFW1960

It didn’t work for me until I deleted site data AND cookies… everything and maybe even refreshed a few times. I am pretty sure for those having problems with 0.85.1 that it’s a browser issue.

FWIW… I don’t think this problem is resolved.

I’m creating my first custom card and everytime i make a change to the name of the card, I get the dreaded Error: Element Not Found.

So what I’m doing to get around this is i started using version numbers in my lovelace config for my custom card ‘sleepTimer’:

title: 3911OFW
resources:
  - url: /local/loveLace/customCards/sleepTimer.js?v=3.8
    type: js
  - url: /local/loveLace/customCards/timer-card.js
    type: js
  - url: /local/loveLace/customCards/entity-attributes-card.js
    type: js
views:
  - !include ./www/loveLace/viewConfigs/bedroom.yaml
  - !include ./www/loveLace/viewConfigs/living_room.yaml
  - !include ./www/loveLace/viewConfigs/security.yaml

Then on the lovelace overview panel i use this to display my card:

path: living-room
title: Living Room
cards:
  - type: custom:sleep-timer
    entity: binary_sensor.office_leftwindow

When i do a “Refresh” from the overview panel menu, i still get the error. But if i refresh the page with my browser, it starts working correctly.

Using the version number is not a fix, its a workaround to force the server to act correctly.
I’ve run into this problem before when writing some backend code for an Apache server.

In my case, even though it appears to be a browser issue, its not. what is happening is that somewhere in the servers food chain, data is getting double or tripled buffered or cached and the backend code cant see the changes you made until the change bubbles up through the buffers to get processed properly. So using the version number or refreshing the browser or using another browser or using another computer helps to push changes through all the buffering/caching. After that everything seems to work great until the next change comes along.

I cant exactly remember how we fixed it, but it was something like apache had buffering on, sql had buffering on, and we were using memcache for buffering and the service provider was using some sort of cache. I think we turned off the sql server cache and the service providers cache, then everything worked hunky dorey!!

Hope this helps to fix the problem, cause im already sick of changing the version number everytime i make a code change.

[DavidFW1960 (David)]

That is one of the reasons I use HACS as it stops that caching version number stuff.

[HeadHodge]

Thanks ill have to check it out.

i looked into this a little bit more.

if you use the chrome console you can clearly see chrome using the cached version of the card js file, even though the file has been modified.

the reason its doing that is because the hassio server is telling chrome (and all other browsers) that its ok to do that.

it does that by by replying to chrome’s HTTP GET request with this REPLY Header:
Cache-Control: public, max-age=2678400

This is wrong, it should reply with something like this:
Cache-Control: no-cache

no-cache uses the ETag header to tell caches that this resource cannot be reused without first checking if the resource has changed on the origin server . This means that no-cache will make a trip back to the server to ensure the response has not changed and therefore is not required to download the resource if that is the case

Cache-Control - How to Properly Configure It - KeyCDN Support

So im still of the belief that this is a Hassio server problem that could easily be fixed. Then no need for version numbers.

[DavidFW1960 (David)]

The instructions have always been to change the version number. There are probably good reasons for doing it like this.

[HeadHodge]

@DavidFW1960

There are probably good reasons for doing it like this.

Maybe… but i sure would like to know what that reason is.