Lovelace - custom element doesn't exist

Hi.
I’ve started to work on Lovelace customization.
I’ve downloaded Lovelace cards for air visual and thermostat (https://github.com/ciotlosm/custom-lovelace/tree/master/thermostat-card)
I’ve put all the needed files in ~/config/www/ directory. Next I’ve added config lines in ui-lovelace.yaml
Restarted home assistant and I’ve got error “custom element doesn’t exist” for both cards. So it looks like it can’t access the www directory. On the other hand I have the images for device tracker in www dir and they show up just fine.

I had front-end configured to use latest JavaScript, changed it to auto, but nothing has changed.

Checked on mobile Chrome, Samsung Internet,
macOs Chrome, safari

My config:

title: Home
resources:
  - url: /local/air-visual-card.js
    type: js
  - url: /local/thermostat-card.js
    type: js
views:
  - badges:
      - sensor.termometr_temperature
      - sensor.termometr_humidity
      - sensor.humidity_158d0001ab760f
      - sensor.pressure_158d0001ab760f
      - sensor.temperature_158d0001ab760f
      - sensor.humidity_158d0002239d41
      - sensor.pressure_158d0002239d41
      - sensor.temperature_158d0002239d41
    cards:
      - type: "custom:air-visual-card.js"
        air_pollution_level: sensor.us_air_pollution_level_2
        air_quality_index: sensor.us_air_quality_index_2
        main_pollutant: sensor.us_main_pollutant_2
        city: 'Warszawa'

and dirs

ls -la www
total 244
drwxr-xr-x 3 pi pi  4096 Jan 25 16:00 .
drwxrwxrwx 9 pi pi  4096 Jan 25 16:14 ..
-rw-r--r-- 1 pi pi  8206 Jan 25 00:50 air-visual-card.js
drwxrwxrwx 2 pi pi  4096 Jun  7  2018 custom_ui
-rw-r--r-- 1 pi pi 95671 Aug  6  2017 ewelina.jpg
-rw-r--r-- 1 pi pi 61697 Aug  6  2017 karol.jpg
-rw-r--r-- 1 pi pi  4476 Jan 25 15:59 thermostat-card.js
-rw-r--r-- 1 pi pi 25855 Jan 25 16:00 thermostat-card.lib.js

could u post that with formatting? so we can see the formatting.
the normal issue with custom cards is

  1. not putting quotation marks around the card type so -> -type: “custom:thermostat-card.js” but u have done this… so thats not it
  2. another issue commonly seen is that its all cached … so shift reload in the browser and clear all the caches
  3. where is your homeassistant directory? basically the www directory should be on the same level as your ui-lovelace.yaml file.

Hi Dom,

Having same issue and have read all the post on clearing cache, hence don’t believe that’s the problem. Seems like others are experiencing this issue hence was hoping .86+ would solve this but it hasn’t. Besides the custom element doesn’t exist error, there is no further debug info. I can offer or use to drill into the problem.

Just want to make sure the location I’m putting the custom element is in the correct spot…


The base directory from my HA can be seen by all the yaml files, the lovelace file (which was auto created by HA) resides in .storage directory and the custom element is in the www directory which I created.
If okay can I PM you my lovelace file for advice?

  1. as you said - quotations are required, I have them
  2. Shift + F5 didn’t help - different browsers didn’t help
  3. I have config dir in ~/.homeassistant. I’ve got there ui-lovelace.yaml and www directory

EDIT:
Ok, I’ve noticed it. I have

 - type: "custom:air-visual-card.js"

but should be

 - type: "custom:air-visual-card"

Yes PM it across I can look

Oops ,. Yep I missed that one…does it work now?

Hello all,

I have the same problem, my Home-Assistant dont look to see the lovelace custom elements or files.
My setup is the following;
Home Assistant 0.89.2
Running in a docker
Host system, Unraid server

I tried to put my file in www folder but it does not see it (tested with the background image).
I finaly put the file directly in the root folder where the config files are located. /local/
In this folder, it see my background image, so it have access.

This is my lovelace config file

background: center / auto repeat url("/local/surfgirl.png") fixed
resources:

  • type: module
    url: /local/.storage/mini-media-player-bundle.js
  • type: js
    url: /local/.storage/clock-card.js
  • type: js
    url: /local/.storage/moment.js
  • type: js
    url: /local/.storage/slider-entity-row.js
  • type: js
    url: /local/.storage/card-tools.js
  • type: js
    url: /local/.storage/card-modder.js
  • type: module
    url: /local/.storage/button-card.js
    title: Résidence Famille Guénette
    views:
  • badges:
    • sun.sun
      cards:
    • entity: weather.dark_sky
      name: Météo
      type: weather-forecast
    • entities:
      • entity: light.chambre_maitre
      • entity: light.wall_switch_1
        name: Extérieur Avant
      • entity: light.wall_switch_2
        name: Extérieur Arrière
      • entity: light.veranda
        show_header_toggle: false
        title: Lumières
        type: entities
    • entities:
      • entity: switch.borne
      • entity: switch.cuisiniere
        show_header_toggle: false
        title: SonOff Borne / Cuisinière
        type: entities
    • entities:
      • entity: input_boolean.borne_tesla
      • entity: input_boolean.cuisiniere
      • entity: input_boolean.max_home
      • entity: input_boolean.nad_home
      • entity: input_boolean.siri_aurevoir
      • entity: input_boolean.siri_bonjour
      • entity: input_boolean.siri_nuit
        show_header_toggle: false
        title: Boolean
        type: entities
    • default_zoom: 10
      entities:
      • entity: device_tracker.max_iphone
        title: Location
        type: map
    • entity: media_player.cuisine_salon
      type: media-control
    • type: entity-button
      tap_action:
      action: toggle
      hold_action:
      action: none
      entity: input_boolean.borne_tesla
      theme: palms
      path: default_view
      title: Home
  • badges: []
    cards:
    • entity: alarm_control_panel.home_alarm
      name: Système d’alarme
      states:
      • arm_home
      • arm_away
        type: alarm-panel
        icon: ‘’
        title: Alarme

When I add a manual card using the lovelace editor, I have this error message.

Custom element doesn’t exist: card-modder.

I have this message for all custom component I try to add to lovelace.

You have an idea of my problem.

Tks for your help!

Max

Just a note… make sure you’ve got the latest versions of your custom cards, including card-tools. I was having a similar problem after an update due to an old version of card-tools.

That a new setup, all custom cards are to the latest version…
Tks for your help!

I had the same issue, and I just needed to change the reference to the location of the card from www to local and it worked.

I have the same issue. do you find a solution?

Hi i just read around 10 hours of post… but maybe im burnt… where did you put the file?

\HOMEASSISTANT\config\local ???

Thanks

if in HA you write something like /local/pic.png, that means it is located in <HA config folder>/www/, i.e HA uses /local/ instead of <HA config folder>/www/ (as it considers it a root of all browser-related data or so).
therefore use HOMEASSISTANT\config\www

stupid problem! OMG

The problem was to write in the resources panel \local\slider-entity-rows.js instead of /local/slider-entity-rows.js

Thanks

2 Likes

GREAT! Changing from / to \ suddenly made all custom addons to start working and a new world opened up for me. :slight_smile: