Custom lovelace cards do not work - "Custom element doesn't exist"

Configuration
1

Hi All,

I spent almost 2 days trying to add a few custom lovelace cards, but no luck. I saw similar issues on the internet, but the recipe did not work for me. Can someone help me?

Here is some info about my setup and what I tried so far:

  • my HA 2020.12.2 is running in a docker container on a x86 host
  • a directory with HA configuration files is mapped to /config directory in the container
  • allowlist_external_dirs setting in the configuration.yaml enables /config
  • tried installing cards manually, as well as via HACS
  • the error is not for one card only - I tried several different ones
  • I see cards I installed listed on HACS->frontend tab
  • I see cards code located in /www/community
  • I tried different base ULRs in the resources section of my ui-lovelace.yaml
resources:
  - url: /hacsfiles/simple-thermostat/simple-thermostat.js
    type: module
  - url: /local/simple-thermostat/simple-thermostat.js
    type: module
  - url: /local/community/simple-thermostat/simple-thermostat.js
    type: module
  • The card lovelace code is taken from cardā€™s instructions:
      - type: custom:simple-thermostat
        entity: climate.living_room_trv
        step_layout: row
        show_header: false
        control: false

Unfortunately I continue geting the ā€˜Custom element doesnā€™t exist: simple-thermostat.ā€™ error for all options I tried. Does anyone know what is wrong?

2
3

That code is written for yaml mode. To use that code in a UI card, delete the dash and remove the indentation.

type: custom:simple-thermostat
entity: climate.living_room_trv
step_layout: row
show_header: false
control: false

Also, please heed Christophā€™s advice regarding the important security update.

1 Like
4

Hmmm, everything got fixed with updating HA to 2021.1.5
Sorry for disturbing with so stupid questions.

BTW, I am using yaml mode, so it went working with the code I posted originally.

1 Like
5

I realized what was wrong - some of the card code was cached by browser. Just in case if someone else hit the same issue, here are a few things to try:

  • Restart HA
  • Force browser to reload lovelace page (Ctrl-F5 on PC)
  • Base URL for custom cards in the resource section is /local/community/ (it loads files located at /www/community
2 Likes
6

You will need to relocate the code for the resources from the ui-lovelace.yaml to the ā€œlovelace:ā€ section of your configuration.yaml.

Iā€™m surprised it still works because I thought that was already deprecated. But it will be removed later so you might as well do it now.

in configuration.yaml:

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/simple-thermostat/simple-thermostat.js
      type: module
    - url: /local/simple-thermostat/simple-thermostat.js
      type: module
    - url: /local/community/simple-thermostat/simple-thermostat.js
      type: module
7

Iā€™m getting the same error trying to get minimalist to work; i.e.

image
image985Ɨ631 35.7 KB

The cards are installed in HACS / frontend
I have added the resources to configuration.yaml

scene: !include scenes.yaml

frontend:
  themes: !include_dir_merge_named themes

lovelace:
  mode: yaml
  resources:
    - url: /hacsfiles/frigate-hass-card/frigate-hass-card.js
      type: module

    - url: /hacsfiles/lovelace-auto-entities/auto-entities.js  
      type: module

    - url: /hacsfiles/button-card/button-card.js
      type: module

    - url: /hacsfiles/lovelace-card-mod/card-mod.js
      type: module

    - url: /hacsfiles/mini-graph-card/mini-graph-card-bundle.js
      type: module

    - url: /hacsfiles/mini-media-player/mini-media-player-bundle.js
      type: module

    - url: /hacsfiles/light-entity-card/light-entity-card.js
      type: module

    - url: /hacsfiles/simple-weather-card/simple-weather-card-bundle.js
      type: module

    - url: /hacsfiles/my-cards/my-cards.js
      type: module

but the cards donā€™t show.

What else am I missing here?

8

I have no idea how UI-minimalist works but have you tried clearing your browser cache (ctrl-F5 or a hard refresh)?

1 Like
9

Iā€™m running this in an incognito browser; used Ctrl-F5 with the same resultā€¦

Is there any additional logging I could switch on to see where this may break?

Also how can I check where /hacsfiles is mapped to?

10

Have you tried it without the Minimalist layer?

if it works otherwise then it has to do with that.

But other than that I donā€™t see any glaring errors in the setup.

11

Just started getting this error with some of my ā€œsimple-thermostatā€ cards. A shift-reload in Chrome and itā€™s working just fine. Thanks @finity

12

Today this happened to me on my phone (android) I logged out of the app and closed it fully, then opened it up again and relogged in, after that it works fine. Looks like a cache issue.

1 Like
13

Yes, Itā€™s a caching issue, but it keeps giving errors. Very annoying. Also, the IOS app does give this error. But the strange thing is a completely new phone, never had the app installed, gives directly the error once logged in. Close the app and reopen it all worked fine.

It seems like these custom files are loaded on the end of the page, and therefore it gives this error. Reloading the page works because the files have been cached.

Can we have a preloading in place to have a workaround for this issue?