TypeError: Cannot convert undefined or null to object

[darkkatarsis]

There is a problem when mini-media-player has as source virtual entity like "media_player.spotify" from https://github.com/hassio-addons/addon-spotify-connect, other media_player sources work fine

error from the dev console on chrome:

app.a259a502.js:2 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at HTMLElement._listenKeyEventListeners (app.a259a502.js:2)
    at HTMLElement.attached (app.a259a502.js:2)
    at HTMLElement.attached (app.a259a502.js:651)
    at HTMLElement.connectedCallback (app.a259a502.js:2)
    at Va._insert (mini-media-player-bundle.js?v=1.1.3:1)
    at Va._commitNode (mini-media-player-bundle.js?v=1.1.3:1)
    at Va._commitTemplateResult (mini-media-player-bundle.js?v=1.1.3:1)
    at Va.commit (mini-media-player-bundle.js?v=1.1.3:1)
    at db (mini-media-player-bundle.js?v=1.1.3:1)

[kalkih]

Hello, I'm not familiar with that particular addon.
Are you using the spotify component and get the error when spotify has hass.io as source?

Could you post the attributes of the media player when you are seeing this issue, thanks.

Also, is that the entire error? there's no down arrow you can press to get a longer stack trace?

[darkkatarsis]

Thank you for the quick reply. Exactly, Im using this spotify component

configuration.yaml

media_player:
  - platform: spotify
    client_id: !secret spotify_id
    client_secret: !secret spotify_token

lovelace.yaml

type: vertical-stack
show_header_toggle: false
title: Music
cards:
  - type: 'custom:mini-media-player'
    entity: media_player.spotify
    group: false
    icon: 'mdi:spotify'
    shortcuts:
      columns: 3
      hide_when_off: true
      spotify_source:
        name: 'Source:'
        options:
          - option1
          - option2

after changing entity: media_player.spotify to something else the problem disappears

error from console:
img

[iantrich]

@darkkatarsis if you go to the developer states page, you'll find the listed attributes for any of your devices which is what @kalkih is asking be provided

[darkkatarsis]

@iantrich, @kalkih

Entity:
media_player.spotify

State:
idle

Attributes:

media_content_type: music
source_list: MIBOX3
shuffle: false
friendly_name: Spotify
icon: mdi:spotify
supported_features: 51765

[kalkih]

Thanks, umm, actually not sure, the error in the screenshot you posted has a different stack trace.
I'm actually able to reproduce similar errors by jumping between views, but these does only trace back to app*.js and chunk*.js.

@iantrich Any idea what this could be?

app.7ac4ac3c.js:2 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at HTMLElement._listenKeyEventListeners (app.7ac4ac3c.js:2)
    at HTMLElement.attached (app.7ac4ac3c.js:2)
    at HTMLElement.attached (app.7ac4ac3c.js:651)
    at HTMLElement.connectedCallback (app.7ac4ac3c.js:2)
    at HTMLElement.value (chunk.02296e9bfeb8fa5abc3e.js:5864)
    at HTMLElement.value (chunk.02296e9bfeb8fa5abc3e.js:5864)
    at HTMLElement.performUpdate (app.7ac4ac3c.js:2)
    at HTMLElement._enqueueUpdate (app.7ac4ac3c.js:2)
_listenKeyEventListeners @ app.7ac4ac3c.js:2
attached @ app.7ac4ac3c.js:2
attached @ app.7ac4ac3c.js:651
connectedCallback @ app.7ac4ac3c.js:2
value @ chunk.02296e9bfeb8fa5abc3e.js:5864
value @ chunk.02296e9bfeb8fa5abc3e.js:5864
performUpdate @ app.7ac4ac3c.js:2
_enqueueUpdate @ app.7ac4ac3c.js:2
async function (async)
_enqueueUpdate @ app.7ac4ac3c.js:2
_requestUpdate @ app.7ac4ac3c.js:2
set @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
update @ app.7ac4ac3c.js:2
_commitTemplateResult @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
a @ app.7ac4ac3c.js:2
U.render @ app.7ac4ac3c.js:2
update @ app.7ac4ac3c.js:2
performUpdate @ app.7ac4ac3c.js:2
_enqueueUpdate @ app.7ac4ac3c.js:2
async function (async)
_enqueueUpdate @ app.7ac4ac3c.js:2
_requestUpdate @ app.7ac4ac3c.js:2
set @ app.7ac4ac3c.js:2
value @ app.7ac4ac3c.js:1197
value @ app.7ac4ac3c.js:881
performUpdate @ app.7ac4ac3c.js:2
_enqueueUpdate @ app.7ac4ac3c.js:2
async function (async)
_enqueueUpdate @ app.7ac4ac3c.js:2
_requestUpdate @ app.7ac4ac3c.js:2
set @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
update @ app.7ac4ac3c.js:2
_commitTemplateResult @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
a @ app.7ac4ac3c.js:2
U.render @ app.7ac4ac3c.js:2
update @ app.7ac4ac3c.js:2
performUpdate @ app.7ac4ac3c.js:2
_enqueueUpdate @ app.7ac4ac3c.js:2
async function (async)
_enqueueUpdate @ app.7ac4ac3c.js:2
_requestUpdate @ app.7ac4ac3c.js:2
set @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
update @ app.7ac4ac3c.js:2
_commitTemplateResult @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
update @ app.7ac4ac3c.js:2
_commitTemplateResult @ app.7ac4ac3c.js:2
commit @ app.7ac4ac3c.js:2
a @ app.7ac4ac3c.js:2
U.render @ app.7ac4ac3c.js:2
update @ app.7ac4ac3c.js:2
performUpdate @ app.7ac4ac3c.js:2
_enqueueUpdate @ app.7ac4ac3c.js:2
async function (async)
_enqueueUpdate @ app.7ac4ac3c.js:2
_requestUpdate @ app.7ac4ac3c.js:2
set @ app.7ac4ac3c.js:2
value @ app.7ac4ac3c.js:1272
handleEvent @ app.7ac4ac3c.js:2
_boundHandleEvent @ app.7ac4ac3c.js:2
S @ app.7ac4ac3c.js:2
j @ app.7ac4ac3c.js:2
k @ app.7ac4ac3c.js:2
(anonymous) @ app.7ac4ac3c.js:2
_propertiesChanged @ app.7ac4ac3c.js:2
_flushProperties @ app.7ac4ac3c.js:410
_flushProperties @ app.7ac4ac3c.js:2
_invalidateProperties @ app.7ac4ac3c.js:2
_setProperty @ app.7ac4ac3c.js:2
Object.defineProperty.set @ app.7ac4ac3c.js:410
_locationChanged @ app.7ac4ac3c.js:1033
z @ app.7ac4ac3c.js:2
k @ app.7ac4ac3c.js:2
w @ app.7ac4ac3c.js:2
_propertiesChanged @ app.7ac4ac3c.js:2
_flushProperties @ app.7ac4ac3c.js:410
_flushProperties @ app.7ac4ac3c.js:2
_invalidateProperties @ app.7ac4ac3c.js:2
_setProperty @ app.7ac4ac3c.js:2
Object.defineProperty.set @ app.7ac4ac3c.js:410
__computeRoutePath @ app.7ac4ac3c.js:1038
z @ app.7ac4ac3c.js:2
k @ app.7ac4ac3c.js:2
w @ app.7ac4ac3c.js:2
_propertiesChanged @ app.7ac4ac3c.js:2
_flushProperties @ app.7ac4ac3c.js:410
_flushProperties @ app.7ac4ac3c.js:2
_invalidateProperties @ app.7ac4ac3c.js:2
(anonymous) @ app.7ac4ac3c.js:2
_propertiesChanged @ app.7ac4ac3c.js:2
_flushProperties @ app.7ac4ac3c.js:410
_flushProperties @ app.7ac4ac3c.js:2
_invalidateProperties @ app.7ac4ac3c.js:2
_setProperty @ app.7ac4ac3c.js:2
Object.defineProperty.set @ app.7ac4ac3c.js:410
_urlChanged @ app.7ac4ac3c.js:1033
(anonymous) @ app.7ac4ac3c.js:2
r @ app.7ac4ac3c.js:2
i @ app.7ac4ac3c.js:806
value @ chunk.02296e9bfeb8fa5abc3e.js:5864
handleEvent @ app.7ac4ac3c.js:2
_boundHandleEvent @ app.7ac4ac3c.js:2
fire @ app.7ac4ac3c.js:2
_itemActivate @ chunk.46f96511e93e506b8f33.js:2
_activateHandler @ chunk.46f96511e93e506b8f33.js:2
_activateHandler @ chunk.46f96511e93e506b8f33.js:2
_activateHandler @ chunk.02296e9bfeb8fa5abc3e.js:2506
(anonymous) @ app.7ac4ac3c.js:2
H @ app.7ac4ac3c.js:2
V @ app.7ac4ac3c.js:2
touchend @ app.7ac4ac3c.js:2
I @ app.7ac4ac3c.js:2

[kalkih]

Maybe related home-assistant/frontend#3125

[darkkatarsis]

if I can add jumping between views, reloading page and editing card reproduce this error

[nudded]

@kalkih I did some investigation and it's related to the ha-paper-slider. It seems like the registered callback is not called, which causes _keyBindings to be empty. In other places ha-slider is used, which does not have this problem.

There is also this https://github.com/home-assistant/home-assistant-polymer/blob/dev/hassio/src/hassio-main.ts#L33 interesting comment, which seems like an ugly work-around for the same problem.

[kalkih]

Thanks @nudded, switching to ha-slider seems to indeed prevent these errors. the ha-slider component was introduced sometime in december last year so changing to it would make the card incompatible with HA versions prior to ~ 0.85.0, but we could add a check and define it if it doesn't exist.

[nudded]

@kalkih Ah very nice, thanks for taking the time to fix it! (although I guess it is also an issue upstream)