Lovelace YAML migrate - Custom element doesn't exist

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

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.

Never asked me regarding controlling the UI…

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

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

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”
lovelace

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

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:
incognito

5:
After you will log in to Home Assistant (HA) as root user copy paste of your lovelace content file (ui-lovelace.yaml).
ui
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):

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

  - url: /local/gauge-card.js?v=0.2.0
    type: js
  - url: /local/custom_ui/dark-sky-weather-card.js?v=4
    type: js
  - url: /local/toggle-lock-entity-row.js?v=1
    type: js
  - url: /local/mini-graph-card-bundle.js?v=0.1.0
    type: module
  - url: https://unpkg.com/[email protected]/moment.js
    type: js
  - 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
  - url: /local/slider-entity-row.js?v=1
    type: js
4 Likes

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…

Ok, after upgrading to 0.86.1 everything is working again :smile:

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

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

1 Like

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

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!! :slight_smile:

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

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

1 Like

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

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

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

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

is this a hassio add-on? for some reason i cant find it

It’s a custom component.

Got it installed, but stuck on how to add my custom card to it?

resources:

  • url: /local/loveLace/customCards/sleepTimer.js?v=3.8
    type: js

you should have a www/community folder now… so move sleepTimer.js there and then in resources try:

  - url: /community_plugin/sleepTimer.js
    type: js

Pretty sure that will work… if it doesn’t you might need to add your repo to hacs…

1 Like