Custom card component error

[gerliczky]

Describe the bug
The custom card component does not show up on the screen. The sensor entity state is unknown.
There is only one line in the log about the subscription of the mqtt topic: "Subscribing to zigbee2mqtt/bridge/networkmap/raw " But there is no more message on the log in this topic.

sensor config:

sensor:
  - platform: mqtt
    name: Zigbee2mqtt Networkmap
    # if you change base_topic of Zigbee2mqtt, change state_topic accordingly
    state_topic: zigbee2mqtt/bridge/networkmap/raw
    value_template: >-
      {{ now().strftime('%Y-%m-%d %H:%M:%S') }}
    # again, if you change base_topic of Zigbee2mqtt, change json_attributes_topic accordingly
    json_attributes_topic: zigbee2mqtt/bridge/networkmap/raw

Lovelace UI config:

cards:
   - type: custom:zigbee2mqtt-networkmap
     entity: sensor.zigbee2mqtt_networkmap

 resources:
   - url: /local/zigbee2mqtt-networkmap.js?v=0.5.0retry
     type: module

The 0.5.0 released version of the zigbee2mqtt-networkmap.js is copied to the www folder.

The following error appear on the lovelace UI.

Screenshots
Entity state:

Lovelace UI:

Home Assistant version
0.100.2

Zigbee2mqtt version
1.6

OS and browser version
Ubuntu 18.04.3LTS, Chrome 7.0.3865.120 (64 bit)

Error message on browser
None

State attributes of sensor.zigbee2mqtt_networkmap
friendly_name: Zigbee2mqtt Networkmap

Home Assistant log
DEBUG (MainThread) [homeassistant.components.mqtt] Subscribing to zigbee2mqtt/bridge/networkmap/raw

Additional context
None

[nickrout]

You appear to have no resources lines in your lovelace config

[gerliczky]

You are right. I added it to the description.

[nickrout]

So does adding it did the problem?

[gerliczky]

No. It was originally in my lovelace config. I just forgot to copy it in the issue description.

[nickrout]

So how did your install? Hacs or manually?

[gerliczky]

I did it manually

[tcrichton]

Same Lovelace error for me, I haven't dug far yet.

I'm running hassbian on a raspberry pi but otherwise same versions of homeassistant and zigbee2mqtt.

Same configuration copied and pasted from GitHub readme instructions.

[tcrichton]

@gerliczky, my issue was simple. The zigbee2mqtt-networkmap.js file in <homeassistant_config_dir>/www/ wasn't readable by the user homeassistant runs as.

A simple chmod 755 zigbee2mqtt-networkmap.js and its working for me.
Hope its as simple for you.

[gerliczky]

Thanks for your comment @tcrichton. That was my first idea and unfortunately it did not help. I think the problem is somewhere deeper, because it sais the custom component does not exusts and the entity is unknown.
Does anyone had the same symptoms?

[nickrout]

What is in the mqtt topic zigbee2mqtt/bridge/networkmap/raw ? The sensor doesn't seem to have populated properly. However that wouldn't explain the "custom element doesn't exist" message in the gui. That essentially means you didn't install the .js file properly. Just to clarify, does

cat www/zigbee2mqtt-networkmap.js

look like the js code in the repository?

[nickrout]

PS if you have HACS on your HA system, this installs very nicely, but the path will be different.

  - url: /community_plugin/zigbee2mqtt-networkmap/zigbee2mqtt-networkmap.js
    type: module

Remove the manually installed one first.

[gerliczky]

Thanks for your assistance @nickrout. I installed HACS. I installed the zigbee2mqtt networkmap plugin and the result is the same.
When I open the plugin in browser I see only the source code of the javascript. It seems that the browser cannot execute it.

[nickrout]

Did you uninstall the manually installed version?

What does your lovelace configuration now say?

[azuwis]

Custom element doesn't exist indicates that home-assistant UI does not import the js resource.

If you install it manually, you should be able to visit the js at http://your-home-assistant-domain/local/zigbee2mqtt-networkmap.js or http://your-home-assistant-domain/community_plugin/zigbee2mqtt-networkmap/zigbee2mqtt-networkmap.js if you use HACS according to the comment above.

Open the url in the browser, you should see something like:

(function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return
...

which is the compiled source code.

If you see 404 http error page, restart home-assistant and try again read https://developers.home-assistant.io/docs/en/lovelace_custom_card.html

if you have recently added the www folder you will need to re-start home assistant for files to be picked up

If you still see 404, there is something wrong in you home-assistant setup, make sure <homeassistant_config_dir>/www/ dir and <homeassistant_config_dir>/www/zigbee2mqtt-networkmap.js file are readable by the user home-assistant runs as.

If you can see the compiled source code, then the lovelace resources part of the setup is wrong.

[gerliczky]

Did you uninstall the manually installed version?

What does your lovelace configuration now say?

I deleted the zigbee2mqtt-networkmap.js file from the www folder and removed the configuration from the lovelace YAML. I did not touch the mqtt sensor config
Should I had to do soemthing else as well?
After that I installed the plugin with HACS, I added all configuration back to th configuration.yaml and the lovelce.yaml

The lovelace configuration did not changed at all. Or what do you mean on "What does your lovelace configuration now say?"

[gerliczky]

The lovelace UI shos me the same error, not 404. I can load the compiled sourcecode into the browser by entering the correct url.

[gerliczky]

Thanks for your assistance guys, I found the problem. Of course it was my fault. I use more tabs with lovelace, so I have a separated file for each view. The problem was that, I put the resources tag into the same file where I defined the cards, which means I placed resources undet the views tag, which was wrong.