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.

#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
#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