Uncaught (in promise) TypeError: Cannot read property 'states' of undefined

[robearlam]

I'm getting a strange error, in come cases when using this card. I have it working fine on one panel but not on another. I'm trying to use vertically stacked inside vertical-stack-in-card, like so:

- type: 'custom:vertical-stack-in-card'
        cards:
            show_icon: false
            show_state: true
            type: glance
          - type: 'custom:garbage-collection-card'
            entity: sensor.recycling_collection
            icon_size: 35px
            icon_color: green
            hide_date: true
          - type: 'custom:garbage-collection-card'
            entity: sensor.rubbish_collection
            icon_color: '#0561ba'
            hide_date: true

The strange thing is, it works in the Preview modal, but then when I accept changes it's not displayed in the real LoveLace view, and there is the following console error reported:

Uncaught (in promise) TypeError: Cannot read property 'states' of undefined
    at garbage-collection-card.js:59
    at Array.forEach (<anonymous>)
    at HTMLElement._getAttributes (garbage-collection-card.js:54)
    at HTMLElement.set hass [as hass] (garbage-collection-card.js:263)
    at HTMLElement.createCardElement (vertical-stack-in-card.js:95)
    at vertical-stack-in-card.js:25
    at Array.map (<anonymous>)
    at HTMLElement.renderCard (vertical-stack-in-card.js:25)
    at HTMLElement.setConfig (vertical-stack-in-card.js:20)

[amaximus]

As a test could you please try moving the custom garbage collection card out of the vertical-stack-in-card card?

I can of course add a check before line 59 to see if hass is defined, but since noone reported similar issue while the card is used by many, I rather suspect that this is caused by some interference with the vertical-stack-in-card. That's why my above test proposal to exclude this case. You may also try to flush your browser cache and reload the page once you applied the changes from Preview modal (seems you are not using the yaml mode, but do edits within the UI).

Looking forward to hear about your test results.

[robearlam]

Yeah the card works fine outside of the custom-vertical-stack card, it seems like a clash between the two.

Once changes are applied using hard refresh (no cache) the card sometimes shows, sometimes gives the error listed above.

It's a strange one.

Full yaml for the card is:

type: vertical-stack
cards:
  - type: markdown
    content: '# Home'
    style: |
      ha-card {
        text-align: center;
        background-color: transparent !important;
        box-shadow: none !important;
      }
  - type: weather-forecast
    entity: weather.home
  - type: 'custom:vertical-stack-in-card'
    cards:
      - type: 'custom:garbage-collection-card'
        entity: sensor.recycling_collection
        icon_size: 35px
        icon_color: green
        hide_date: true
      - type: 'custom:garbage-collection-card'
        entity: sensor.rubbish_collection
        icon_color: '#0561ba'
        hide_date: true

[danielbrunt57]

Your code...

type: vertical-stack
cards:
  - type: markdown
    content: '# Home'
    style: |
      ha-card {
        text-align: center;
        background-color: transparent !important;
        box-shadow: none !important;
      }
  - type: weather-forecast
    entity: weather.norton_court
  - type: 'custom:vertical-stack-in-card'
    cards:
      - type: 'custom:garbage-collection-card'
        entity: sensor.waste
        icon_size: 35px
        icon_color: green
      - type: 'custom:garbage-collection-card'
        entity: sensor.recycling
        icon_color: '#0561ba'

...does not work for me either.

I'm using this code...

type: vertical-stack
cards:
  - type: 'custom:garbage-collection-card'
    entity: sensor.waste
    icon_color: black
    due_color: red
    due_1_color: purple
    due_txt: true
  - type: 'custom:garbage-collection-card'
    entity: sensor.recycling
    icon_color: black
    due_color: red
    due_1_color: blue
    due_txt: true

and it works in Firefox but starting yesterday it stopped working in Chrome.

[amaximus]

Could you please flush your browser cache. I'm using it in Chrome (both Windows and Android) and it works without issues.

[danielbrunt57]

I already tried that! What version is your Chrome?

[danielbrunt57]

I also tried from Chrome on two servers at the office that have never accessed my HA and same behaviour. They are also the most current version of Chrome. I'm using HA 2012.12.0

[danielbrunt57]

Actually, one of the two vertical-stack cards I have with garbage-collection-card is not working in Firefox. The 2nd one as per robearlam is not working but my own is. Neither work in Chrome. I have other vertically stacked cards and they are fine.

[danielbrunt57]

This is bizarre... So what transpired was I had clicked on each of the entities in Chrome and they disappeared. I can click on them in Firefox and they flash like they disappear for an instant but come back. I've completed removed, purged and re-installed Chrome to no avail. I've removed my yaml config for the two sensors and added them back using the Configuration, Integrations method for the Garbage Collection integration.

Here is Firefox:

Here is Chrome:

Can you try clicking on one of your garbage sensors in your card from Chrome?

[amaximus]

As of version 1.8.0 [1] there is a feature where by clicking the card when garbage collection is due today or tomorrow will hide the card (mimicing that the garbage was prepared for pickup, thus no further actions needed). The card will reappear the day after due date or if hide_before is used X days before next due date. I might add a new configuration option to disable this feature as many users get suprised when the card disappears upon click.

[1] https://github.com/amaximus/garbage-collection-card/releases/tag/1.8.0

[danielbrunt57]

Ok, that's nice to know!

1. Why am I not seeing yesterday's garbage sensor re-display? Chrome: Firefox:
2. Why only the disappearing act in Chrome and not Firefox?
3. Is there a way to manually make it visible again?

[danielbrunt57]

Garbage finally decided to show itself in Chrome...

The date/time test must be off? It should have shown 23 h 12 min ago??

How does that nifty trick actually work?

[amaximus]

The card doesn't show events from past, thus when it appears it will show the next due date and or days until that.

The new version (1.17.0) adds a configuration parameter to control hiding the card upon click, so this feature can be turned off, if not needed.

[danielbrunt57]

Much appreciated!!!

type: vertical-stack
cards:
  - type: markdown
    content: '# Home'
    style: |
      ha-card {
      text-align: center;
      background-color: rgba(67,101,181,0.87);
      -webkit-box-shadow: 14px 14px 5px 0px rgba(7,5,130,1);
      -moz-box-shadow: 14px 14px 5px 0px rgba(7,5,130,1);
      box-shadow: 5px 5px 5px 0px rgba(7,5,130,1);
      }
  - type: weather-forecast
    style: ''
    entity: weather.norton_court
  - type: grid
    square: false
    columns: 2
    cards:
      - type: alarm-panel
        style: |
          ha-card {
            text-align: left;
          }
        states:
          - arm_home
          - arm_away
        entity: alarm_control_panel.alexa_guard_da03a
        name: Alexa Guard
      - type: glance
        style: |
          ha-card {
            text-align: center;
          }
        entities:
          - entity: sensor.uptime
            name: Up Time
        title: System Up Time
        show_name: false
        state_color: true
        show_icon: false
      - type: 'custom:garbage-collection-card'
        style: |
          ha-card {
          }
        entity: sensor.garbage
        icon_color: green
        due_color: yellow
        due_1_color: red
        due_txt: true
        icon_size: 40px
      - type: 'custom:garbage-collection-card'
        style: |
          ha-card {
          }
        entity: sensor.recycling
        icon_color: blue
        due_color: yellow
        due_1_color: red
        due_txt: true
        icon_size: 40px
  - type: entities
    style: |
      ha-card {
        text-align: left;
      }
    entities:
      - entity: sensor.last_alexa
        name: 'Last Alexa:'
        secondary_info: last-updated
        icon: 'hss:no'
    show_header_toggle: false

[danielbrunt57]

Hmmm... These options don't seem to affect the display now:

[amaximus]

If I understand well, your issue now is that the hide_date and hide_days have no effect. Please make sure your sensor.garbage is configured to use verbose_state: false.

[danielbrunt57]

I still can't get the garbage sensor to change no matter what combo I use. Today is recycling day and I can get that sensor to say 'Today', 'Due today' or ' ' with combo's of due_txt: and hide_days: verbose_state: seems to have no effect on anything...

[danielbrunt57]

Ok, so this IS bizarre... Recycle sensor behaves but not garbage!

[amaximus]

Please make sure your sensor.garbage is configured to use verbose_state: false. Could you paste here the configuration of sensor.garbage?

[danielbrunt57]

I was just going to look at the source. I copied the recycle into a new card, then copied that card and edited the entity so figured it must be the sensor... I was thinking verbose_state was lovelace parameter. That's likely the issue....

[danielbrunt57]

Yup! sorry to be a nuisance! Garbage:

Recycle:

[amaximus]

No problem.

[amaximus]

Has the issue been resolved? Can this tracker be closed?

[danielbrunt57]

Yes. my issues are resolved.