Stuck on "custom element doesn't exist" - need help!

Configuration Frontend
1

Could someone please help me? For the world I cannot figure out what is wrong with my Lovelace setup.

I am running hass.io v 0.80.0 on a Raspberry Pi 3.

I have added a number of custom cards to hass.io, but only two of the ones I have tried work. I have included them in my ui-lovelace.yaml as follows:

resources:
  - url: /local/alarm_control_panel-card.js?v=1
    type: js
  - url: /local/button-card.js
    type: module

The following give me the “custom element doesn’t exist” error. As you can see below, the js and css files are located where they are supposed to:

  - url: /local/monster-card.js?v=1
    type: js
  - url: /local/custom_ui/weather-card.js
    type: js

Below are more complete code from my ui-lovelace.yaml:

resources:
  - url: /local/monster-card.js?v=1
    type: js
  - url: /local/custom_ui/gauge-card/gauge-card.js?v=5
    type: js
  - url: /local/custom_ui/bignumber-card/bignumber-card.js?v=1
    type: js
  - url: /local/custom_ui/weather-card.js
    type: js
  - url: /local/custom_ui/weather-card-mini.js
    type: js
  - url: /local/alarm_control_panel-card.js?v=1
    type: js
  - url: /local/mini-media-player/mini-media-player.js?v=0.8.3
    type: module
  - url: /local/button-card.js
    type: module
.
.
.
  - title: "Väder"
    icon: mdi:weather-partlycloudy
    cards:
      - type: "custom:weather-card"
        entity_weather: weather.yweather
        entity_sun: sun.sun
.
.
.
  - title: Test
    icon: mdi:sign-caution
    cards:
      - type: "custom:monster-card"
        card:
          type: entities
          title: Low Battery
        filter:
          include:
          - entity_id: "sensor.*_battery"
          exclude:
          - state: '>= 30.0'
      - type: entities
        entities:
          - input_boolean.test_notify

These are the files in my www directory on the RPi3:

core-ssh:/config/www# ls
alarm_control_panel-card.js  kunskapskanalen.png
bignumber-card.js            linda-192x192.jpg
button-card.js               mini-graph-card.js
calendar-card.js             mini-graph-lib.js
cilla-192x192.jpg            monster-card.js
color-glance-card.js         svt1.png
column-card.js               svt2.png
custom_ui                    svtb_svt24.png
daniel-192x192.jpg           tomas-192x192.jpg
erik-192x192.jpg             tv4.png
folding-group-entity-row.js  tv6.png
gauge-card.js                vertical-style-card.js
icons

and my custom_ui dir:

core-ssh:/config/www/custom_ui# ls
custom-weather-card.html          state-card-tiles_es5.html
state-card-custom-ui-es5.html     weather-card-mini.css
state-card-custom-ui-es5.html.gz  weather-card-mini.js
state-card-custom-ui.html         weather-card.css
state-card-custom-ui.html.gz      weather-card.js
state-card-tiles.html

I just plain fail to see what is wrong, is there a typo or something? Any input would be much appreciated.

2

These two paths look wrong according to your ls?

1 Like
3

Yes, I added those for future use. Haven’t copied the actual js files yet.
Thanks

4

But wouldn’t that throw the error?

5

Nope, I have tried with monster-card as well as weather-card as the only resources in ui-lovelace.yaml. Same problem. I have tested bignumber-card too, and it works fine.

6

Same here. Checked permissons and owners of files.
The config/www folder is working on old frontend without lovelace…
Can’t use any custom component…

7

same here!

what browser do you use?
in chrome some of the modules are working in my configuration.

8

Mostly Vivaldi and Chrome. Also Firefox, but the Lovelace UI looks really ugly in FF.

9

i can‘t find the issue!
the only card that works correct is the gauge-card. the others give me errors: custom card doesn‘t exist…

10

@tomoqv

Hi

I’ve tried the two card that are not working for you and they are working fine for me.

Have you copied also the animated gif described in Custom animated weather card for Lovelace ?

In this case I respected the folder as in the thread

In the moster-card case I used my folder as I told you in the other thread and it’s working fine as well.

Try to double check indentation.
There must be something missing…

11

Sounds to me like a browser issue since not all browsers support the custom element feature or latest javascript, which leads to some cards works and some dont.
Try an updated version of Chrome on your computer and when it works there you can move on to other browsers and devices and be sure that there is no config mistakes.

12

How about Chrome Version 69.0.3497.100 (Official version) (64 bits)? I am running Ubuntu 16.04 and upgrade it at least weekly, so I should be on the latest and greatest of the browsers.

I am just curious why HA seems to be so picky about java and browser versions etc. Seems as it is really on the “bleeding edge” of things as it is so sensitive to this.

13

Tryed a few browsers… FF, Chrome, IE and Edge… Not working.
I don’t think it’s a browser problem.

14

Hey Guys

set to auto instead of latest seems to work

frontend:

  javascript_version: auto
15

Tested. Sadly not working for me…

16

Made it work guys!
I saved the files with “Safe link under…”
But this downloading not the .js file. It makes an HTML file but with right file endings…
Go to github, click on Raw, copy the code, open notepad ++,paste code, safe file, copy to ha, have fun!

4 Likes
17

@Dielee
Thanks, that figures. I have been downloading the wrong format I guess. I can see now when I replace the files that they are typically 2-5 kB in size instead of 80-100 kB!

I think many people like me are new to downloading “Raw”. I have been using Github for years and got used to find a green button to download a zip file for the whole project, including the js files or whatever files I wanted to download, which I think is the case with the custom cards that work for me. The other ones I have just downloaded by right clicking and “Save link as…”.

I will test it as soon as I get home!

18

By the way… It’s important to clean the ui-lovelace.yaml with all the old “wrong” files and their bindings.
Then restart HA service and insert again resources and bindings in the ui config file.

19

for me the issue exists in Chrome, but the same cards work fine in IE.

20

Try upgrading to version 0.81, it has fixed the issue for me