Custom-element doesn't exist

[svenschuldt]

Dear Community,

there seems to be an ongoing issue with customer elements as some newly added/integrated simply don’t show up … for some odd reason. Searching here in the forum, as well as Reddit for example I found various topics on the issue but unfortunately no solution.

I am trying to install for the last two weeks the custom element “custom-header” - which I installed via HACS, where it says that the configuration requires “/hacsfiles/custom-header/custom-header.js” for the URL definition.
Interesting though that with the installation via HACS no directory hacsfiles was made - so I made the directory myself, but that did not help as well

The entry for Lovelace on my configuration looks as follows:

- url: /hacsfiles/custom-header/custom-header.js
      type: module

the directory structure looks like this:

Over the various days I have had the custom-header directory beneath community, community-plugin, I had the hacsfiles in the config directory - I tried all sorts of variations, without any success.

I am sure the problem sits in front of the screen - what am I doing wrong here, anybody has any idea? Any help HIGHLY appreciated!

Thanks a lot!

Sven

[eXtatic (Dominik 🇩🇪)]

Hi Sven,

also on my installation the HACS files are stored in the www/community/ folder event thoug the path says hacsfiles/, so make sure your files are located in the community folder.

If this code shows the real indentation this might be the issue.

@svenschuldt

The entry for Lovelace on my configuration looks as follows:

- url: /hacsfiles/custom-header/custom-header.js
      type: module

What does the Ressource Editor show?
In HA go to Configuration → Lovelace Dashboards → Ressources

[svenschuldt]

Hi,

the indentation was a format of the inclusion in the message here - not that way in the yaml file

I have copied the custom-header to many locations over the last some days, trying to make it work.
My resources in dashboard looks like this:

… and I have it also in the www/community folder …

… but the result is always the same:

no idea, what I should do next …

[finity]

you need to go to HACS control panel and delete the custom-header plugin from there.

then go to your directory that you show in your last screen shot and delete the the “custom-header” folder along with the “hacsfiles” folder that it’s in.

then go to the HACS control panel and re-install custom-header

At that point you should have a “custom-header” folder inside the “community” folder which itself should be in the “www” folder.

after that put the following in your resources section in lovelace:

- url: /hacsfiles/custom-header/custom-header.js
  type: module

restart HA and clear your browser cache just to be sure.

After that it should work.

[DavidFW1960 (David)]

Further to this it’s a common misconception that /hacsfiles/ is a real folder and actually ‘exists’. It doesn’t - it’s an endpoint that points to content in /www/community. Note that local doesn’t exist either - it points to the www folder.

[svenschuldt]

Thank you for the detailed description, which I have followed it step-by-step but … still does not work
I have deleted all prior custom-header files, have uninstalled it, cleared cache, reinstalled … but still the same result … I have no idea why … perhaps it is written in some configuration file unknown

[svenschuldt]

That is good to know - I was not aware fo the concept behind it, thanks for sharing this!

[finity]

Where are you entering the resources for the card?

Which file exactly and what section are you entering it in or are you using the UI?

[svenschuldt]

I have tried both possibilities:

ui-lovelace.yaml and
configuration.yaml

Both times in this way:

resources:
    - url: /hacsfiles/custom-header/custom-header.js
      type: module

In the Lovelace file first thing, in the configuration file after:

lovelace:
  mode: yaml

  resources:
         - url: /hacsfiles/custom-header/custom-header.js
           type: module

Both versions do not work - and I am still definite the mistake sits in front of the screen

[finity]

The only thing I see right off the top of my head is your indentation is off in the code you posted. Check to make sure it’s correct in your actual config.

It definitely has to be in configuration.yaml not in ui-lovelace.yaml

[whit-tj (Tj Whitley)]

Did you ever get it working? I’ve got a number of cards installed via HACS that are in the /www/community/ folder as expected. However when I add the resources via the Lovelace configuration, the cards still don’t work after restarting and refreshing the browser. Any other missing steps to get custom cards working?

I’ve followed the instructions carefully from all the different custom cards, it sure seems like I’ve done every step. I had custom cards working fine via HACS on my older version on RPi3, but when I upgraded my system, I wanted to start fresh because a lot of things had gotten messy during my learning.

[svenschuldt]

How do you add the resource to the configuration? Do you copy it from the HACS screen and then paste it into your editor?
I did that always and after I don’t know how many tries, I realised that there were some tabs and other characters that you cannot see included in the copy - it all looked fine but it screwed the resource information. So I deleted all space characters in the resource definition and added manual spaces:

e.g. after I have retyped the spaces in below it worked … at least worth giving it a try but I cannot guarantee

- url: /hacsfiles/dual-gauge-card/dual-gauge-card.js
  type: module

[LeightonSolo (Leighton Solomon)]

I am in the exact same boat as you. It seems like everything has been done correctly but home assistant can not find the custom elements.

[roninfr]

Same here Has anyone found a solution already ?

[kai-seipp]

+1

meaning have the same issues after reinstalling a full Image of my HA instance on a new machine.

Update: Ok, I was not aware of that change on how to add the configuration. So maybe this helps someone else: Check this comment here: Solved: How do I add custom cards for lovelace?

[denisj (Denis Joshua)]

Hi there all,
it’s some weeks that I have same problem in my Hass.
Before everything was ok.

But now I have this error too:

I use Lovelace in YAML mode and my ui-lovelace.yaml conf it’s begin like this:

# Enable lovelace User Interface
lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/weather-card/weather-card.js
      type: module
#
    - url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js
      type: module
#
    - url: /hacsfiles/bignumber-card/bignumber-card.js
      type: module
#
  ### card-mod - https://github.com/thomasloven/lovelace-card-mod
    - url: /hacsfiles/lovelace-card-mod/card-mod.js
      type: module
#
  ### kiosk-mode - https://github.com/maykar/kiosk-mode (sa nu se vada meniurile din hassio)
    - url: /hacsfiles/kiosk-mode/kiosk-mode.js
      type: module
#
  ### lovelace-layout-card - https://github.com/thomasloven/lovelace-layout-card
    - url: /hacsfiles/lovelace-layout-card/layout-card.js
      type: module
#
  ### font dscarcat de mine
    - url: /local/fonts/loadfonts.js
      type: module
#
  ### font che serve per thema 
    - url: https://fonts.googleapis.com/css?family=Comfortaa&display=swap
      type: css
####################################################################################

### userul tablet nu vede meniurile in hassio 
kiosk_mode:
  non_admin_settings:
    hide_header: true
    hide_sidebar: true

#title: Home
views:
#-----------------------------------------------------------------------------------
#-----------------------------------------------------------------------------------
  - title: Home
    icon: 'mdi:home'
#    background: 'center / cover no-repeat url("/local/background.jpeg") fixed'
    cards:
      - type: vertical-stack
        cards:
          - type: 'custom:bignumber-card'
            entity: sensor.time
            scale: 50px
...etc

My structure folder is like this:

Was always work… is there something change in Lovelace configuration in last time please ?

Thanks in advance
Denis

[DavidFW1960 (David)]

Is HACS running? Have you cleared cache?

[denisj (Denis Joshua)]

My HACS is like this:

I don’t know how to understand if it’s running.
I have clear all cookies/cache and I have test it also with Firefox and on my mobile phone.

Thanks a lot for you answer
Denis

[DavidFW1960 (David)]

Do you see any errors in the browser console? Press F12 in chrome for dev tools and while you are there right click on the refresh button and select clear cache and hard reload and then CTRL+R a couple of times. The error you show is either HACS isn’t running (/hacsfiles/ endpoint doesnt exist therefore no card found) or cache is caching old cards.
Can you confirm hacs installed cards in /www/community/card-name’directory?

[denisj (Denis Joshua)]

@DavidFW1960

Press F12 in chrome for dev tools and while you are there right click on the refresh button and select clear cache and hard reload and then CTRL+R a couple of times.

I have selected more times clear cache and hard reload and the result is the same.
Also I have no errors on the console… is empty:

My hacsfiles is here in the config folder:

Another think I want to remember is that this configuration was worked for a lot of time.
It’s just a couple of weeks that I take this error.

Thanks a lot again
Denis