Lovelace - custom element doesn't exist

karlkar · January 25, 2019, 3:17pm

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

dom · January 25, 2019, 3:32pm

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

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

robg · January 25, 2019, 8:35pm

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?

karlkar · January 25, 2019, 10:13pm

as you said - quotations are required, I have them
Shift + F5 didn’t help - different browsers didn’t help
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"

dom · January 26, 2019, 9:38am

Yes PM it across I can look

dom · January 26, 2019, 9:39am

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

speedmax · March 17, 2019, 12:25pm

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

Will_Finnigan · March 17, 2019, 12:36pm

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.

speedmax · March 17, 2019, 12:59pm

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

MartiAbernathey · May 15, 2019, 9:37am

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.

smile · August 3, 2019, 9:52am

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

MarioR · April 9, 2020, 3:49pm

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

\HOMEASSISTANT\config\local ???

Thanks

AhmadK · April 9, 2020, 3:57pm

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

MarioR · April 9, 2020, 4:18pm

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

finbom · January 9, 2021, 11:30pm

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