Lovelace card doesn't load/work

[sehraf]

Describe the bug Since the recent HA update allows to define multiple lovelace dashboards, i tried to add this beautiful map to my HA (manual setup). When opening the lovelace card i get a red page with the following error

Custom element doesn't exist: zigbee2mqtt-networkmap.
type: 'custom:zigbee2mqtt-networkmap'
entity: sensor.zigbee2mqtt_networkmap
mqtt_base_topic: zigbee2mqtt
force: 3000
node_size: 16
font_size: 12
link_width: 2
height: 400
css: |
  :host {
    --zigbee2mqtt-networkmap-node-color: rgba(18, 120, 98, .7);
    --zigbee2mqtt-networkmap-node-fill-color: #dcfaf3;
    --zigbee2mqtt-networkmap-node-pinned-color: rgba(190, 56, 93, .6);
    --zigbee2mqtt-networkmap-link-color: rgba(18, 120, 98, .5);
    --zigbee2mqtt-networkmap-hover-color: #be385d;
    --zigbee2mqtt-networkmap-link-selected-color: rgba(202, 164, 85, .6);
    --zigbee2mqtt-networkmap-label-color: #127862;
    --zigbee2mqtt-networkmap-arrow-color: rgba(18, 120, 98, 0.7);
    --zigbee2mqtt-networkmap-node-coordinator-color: rgba(224, 78, 93, .7);
    --zigbee2mqtt-networkmap-node-router-color: rgba(0, 165, 255, .7);
  }

Home Assistant version Home Assistant 0.107.1

Zigbee2mqtt version 1.12.0

OS and browser version Archlinux + Chromium

Error message on browser No error in browser console

I do see ..../local/zigbee2mqtt-networkmap.js being successfully requested (HTTP 200).

State attributes of sensor.zigbee2mqtt_networkmap On Home Assistant, go to Menu -> Developer tools -> STATES -> sensor.zigbee2mqtt_networkmap -> Click the link and scroll up, find State attributes (JSON, optional),

unknown

After manually triggering a scan:

nodes:
  - ieeeAddr: '0x00124b0014bde8e8'
    friendlyName: '0x00124b0014bde8e8'
    type: Coordinator
    networkAddress: 0
    failed: []
    lastSeen: 1584293394309
 ........
(there are 1826 lines, i can provide them if you want. But for now i don't want to bloat this ticket up)

Home Assistant log none

Additional context My lovelace dashboard setup looks like this (configuration.yaml)

lovelace:
  mode: storage
  dashboards:
    zigbee2mqtt-board:
      mode: yaml
      title: Zigbee
      icon: mdi:tools
      filename: zigbee2mqtt-networkmap.yaml
      show_in_sidebar: true

The rest (sensor in configuration.yaml) and zigbee2mqtt-networkmap.yaml are as described here https://github.com/azuwis/zigbee2mqtt-networkmap#backend-setup / https://github.com/azuwis/zigbee2mqtt-networkmap#frontend-setup-manual (I've put the content from ui-lovelace.yaml in zigbee2mqtt-networkmap.yaml assuming this is the right thing to do - here might be the error, though)

Zigbee2mqtt base topic is unchanged.

Going to http://your-home-assistant-domain/local/zigbee2mqtt-networkmap.js shows the content of zigbee2mqtt-networkmap.js

[kiddyfurby]

With Home Assistant 0.107.1, custom elements should be added differently.

Goto Configuration > Lovelace Dashboards > Resources Add a new entry, specify /local/zigbee2mqtt-networkmap.js?v=0.6.0 as the url and you should be good to go.

You can also remove the following lines from ui-lovelace.yaml if you added them before

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

[sehraf]

Thanks! Now it's working :+1:

[artem-dudarev]

With Home Assistant 0.107.1, custom elements should be added differently.

Goto Configuration > Lovelace Dashboards > Resources Add a new entry, specify /local/zigbee2mqtt-networkmap.js?v=0.6.0 as the url and you should be good to go.

@azuwis Please add this to the documentation.