lovelace-wallpanel "Wallpanel + Sidebar-card", gives an error.

I have been using Wall Panel for some time and I've install sidebar-card ( https://github.com/DBuit/sidebar-card ). But I get an error, which is reported often. If I uninstall Wallpanel, I no longer have an error and can use sidebar-card.

2023-07-26 17:38:17.196 ERROR (MainThread) [frontend.js.latest.202307051] http://192.168.1.xxx:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740194:18635:23 Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')
2023-07-26 17:40:35.642 ERROR (MainThread) [frontend.js.latest.202307051] http://192.168.1.xxx:8123/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740194:18635:23 Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')

wallpanel +sidebar-card error

I reported the issue on sidebar-card, but I don't know if it's a problem of Wallpanel or sidebar-card. https://github.com/DBuit/sidebar-card/issues/95

Tell me if you need any other information?

Jul 27 '23 12:07 WarC0zes

Have you tried Wallpanel version 4.17.0 yet?

Jul 27 '23 19:07 j-a-n

Yes, I'm using 4.17.0. wallpanel 4 17 0

flood error

Edit: I tried from 4.13.0 to 4.17.0, the same error message appears.

Jul 28 '23 02:07 WarC0zes

I have looked at the source code of the sidebar-card. The problem can be fixed only in the sidebar-card addon.

Aug 20 '23 10:08 j-a-n

@j-a-n and what should be the fix?

Nov 21 '23 14:11 DBuit

I have just tried to reproduce the problem with current versions of wallpanel and sidebar-card. The problem seems to be fixed, right @WarC0zes ?

Dec 10 '23 10:12 j-a-n

I haven't tried with the latest version of sidebar and wallpanel. I'll look at it in the afternoon.

Dec 10 '23 11:12 WarC0zes

I reinstalled wallpanel, I receive an error if I change dashboard page using the sidebar menu. But I no longer have errors spam like before. wallpanel sidebar

wallpanel

Logs:

2023-12-10 14:45:58.119 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
deactivateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2282:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2292:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
mainWindow.history.replaceState (src/common/navigate.ts:43:12)
2023-12-10 14:45:58.120 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
deactivateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2282:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2292:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
2023-12-10 14:47:20.852 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
2023-12-10 14:47:20.864 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
mainWindow.history.replaceState (src/common/navigate.ts:43:12)
2023-12-10 14:49:13.255 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
2023-12-10 14:49:13.261 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
mainWindow.history.replaceState (src/common/navigate.ts:43:12)
2023-12-10 14:49:18.878 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
mainWindow.history.replaceState (src/common/navigate.ts:43:12)
2023-12-10 14:49:18.879 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
2023-12-10 14:49:46.909 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
mainWindow.history.replaceState (src/common/navigate.ts:43:12)
2023-12-10 14:49:46.910 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
dispatchEvent (src/common/dom/fire_event.ts:76:7)
2023-12-10 14:51:16.991 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
2023-12-10 14:51:17.000 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
2023-12-10 14:51:33.088 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
2023-12-10 14:51:33.093 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
2023-12-10 14:53:23.490 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
navigate (/hacsfiles/lovelace-wallpanel/wallpanel.js:554:9)
/hacsfiles/lovelace-wallpanel/wallpanel.js:1986:5
2023-12-10 14:53:23.491 ERROR (MainThread) [frontend.js.latest.202312082] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:503:10)
activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2)
reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3)
locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3)
/hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3
navigate (/hacsfiles/lovelace-wallpanel/wallpanel.js:554:9)

Dec 10 '23 13:12 WarC0zes

I add my config for wallpanel and sidebar if that helps.

wallpanel:

wallpanel:
  enabled: enable
  fullscreen: false
  screensaver_stop_navigation_path: /lovelace/infos
  image_order: random
  image_list_update_interval: 3600
  image_fit: cover
  image_animation_ken_burns: true
  image_url: >-
    https://api.unsplash.com/photos/random?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&auto=enhance&fit=crop&h=1080&w=1920&query=wallpapers
  show_image_info: true
  image_info_template: <span style="color:#44739e">//</span> ${description|alt_description}
  idle_time: 60
  show_progress_bar: true
  info_move_pattern: random
  info_move_interval: 30
  cards:
    - type: custom:digital-clock
      dateFormat:
        weekday: long
        day: 2-digit
        month: long
      timeFormat:
        hour: 2-digit
        minute: 2-digit
      card_mod:
        style: |
          ha-card {
            color: #44739e;
            background: transparent;
          }

Sidebar:

sidebar:
  digitalClock: true
  digitalClockWithSeconds: true
  date: true
  dateFormat: dddd DD MMMM YYYY
  breakpoints:
    mobile: 699
    tablet: 1130
  width:
    mobile: 0
    tablet: 10
    desktop: 13
  hideTopMenu: true
  hideHassSidebar: false
  showTopMenuOnMobile: false
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/infos
      name: Infos
      icon: mdi:information-slab-circle
    - action: navigate
      navigation_path: /lovelace/meteo
      name: Météo
      icon: mdi:weather-partly-cloudy
    - action: navigate
      navigation_path: /lovelace/energie
      name: Énergie
      icon: mdi:flash
    - action: navigate
      navigation_path: /lovelace/phone
      name: Mobile
      icon: mdi:tablet-cellphone
    - action: navigate
      navigation_path: /lovelace/media-player
      name: Music
      icon: mdi:music
    - action: navigate
      navigation_path: /lovelace/default_view
      name: Maison
      icon: mdi:home
    - action: navigate
      navigation_path: /lovelace/placard
      name: Plante
      icon: mdi:sprout
    - action: navigate
      navigation_path: /lovelace/lan
      name: Réseau
      icon: mdi:lan
    - action: navigate
      navigation_path: /lovelace/zigbee
      name: Zigbee
      icon: mdi:zigbee
    - action: navigate
      navigation_path: /lovelace/router
      name: Router
      icon: mdi:set-top-box
    - action: navigate
      navigation_path: /lovelace/home-assistant
      name: Home assistant
      icon: mdi:home-assistant
    - action: navigate
      navigation_path: /lovelace/batterie
      name: Batterie
      icon: mdi:battery
    - action: navigate
      navigation_path: /config/logs
      name: Journal
      icon: mdi:math-log
    - action: navigate
      navigation_path: /hassio/ingress/a0d7b954_adguard
      name: AdGuard
      icon: phu:adguard
  template: |
    <li>
      {% if now().hour  < 6 %}  🌙 Bonne nuit WarC0zes! 🤘 
      {% elif now().hour < 12 %}  🌞 Bonne matinée WarC0zes!
      {% elif now().hour < 18 %}  😎 Bon après-midi WarC0zes!
      {% else %}  🌜 Bonne soirée WarC0zes! 🤘 {% endif %}
    </li>

Dec 13 '23 03:12 WarC0zes

Cannot reproduce the issue. You can try to set hideTopMenu: false in sidebar config and use wallpanel config to hide the top bar.

Dec 31 '23 10:12 j-a-n

Cannot reproduce the issue. You can try to set hideTopMenu: false in sidebar config and use wallpanel config to hide the top bar.

I tried and still the same error. wallpanel sidebar4

Logger: frontend.js.latest.202312082
Source: components/system_log/__init__.py:300
First occurred: 11:31:00 (10 occurrences)
Last logged: 11:35:36

Uncaught error from Chrome 120.0.0.0 on Windows 10 TypeError: Cannot read properties of null (reading 'shadowRoot') getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23) createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26) updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66) /hacsfiles/sidebar-card/sidebar-card.js:18743:9 setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:501:10) activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2) reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3) locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3) /hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3 dispatchEvent (src/common/dom/fire_event.ts:76:7)
Uncaught error from Chrome 120.0.0.0 on Windows 10 TypeError: Cannot read properties of null (reading 'shadowRoot') getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23) SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30) /hacsfiles/sidebar-card/sidebar-card.js:18107:18 setSidebarHidden (/hacsfiles/lovelace-wallpanel/wallpanel.js:501:10) activateWallpanel (/hacsfiles/lovelace-wallpanel/wallpanel.js:2273:2) reconfigure (/hacsfiles/lovelace-wallpanel/wallpanel.js:2289:3) locationChanged (/hacsfiles/lovelace-wallpanel/wallpanel.js:2325:3) /hacsfiles/lovelace-wallpanel/wallpanel.js:2343:3 dispatchEvent (src/common/dom/fire_event.ts:76:7) mainWindow.history.replaceState (src/common/navigate.ts:43:12)

wallpanel3

Dec 31 '23 10:12 WarC0zes

@DBuit Could you please catch the error in getHeaderHeightPx? Somehow getRoot() seems to return null.

Dec 31 '23 10:12 j-a-n

lovelace-wallpanel lovelace-wallpanel copied to clipboard

"Wallpanel + Sidebar-card", gives an error.

lovelace-wallpanel
lovelace-wallpanel copied to clipboard