Mini-media-player: TypeError: Cannot convert undefined or null to object

Created on 29 May 2019 · 10Comments · Source: kalkih/mini-media-player

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)

bug

Source

darkkatarsis

Most helpful comment

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.

kalkih on 14 Jun 2019

🎉2

All 10 comments

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?

kalkih on 29 May 2019

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

darkkatarsis on 29 May 2019

@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

iantrich on 29 May 2019

@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

darkkatarsis on 29 May 2019

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 on 29 May 2019

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

darkkatarsis on 29 May 2019

@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.