Error while rendering clock-weather-card component: TypeError: this.hass is undefined

[Marvinmsn]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser
• I read the FAQ and the issue I'm having was not mentioned there.

Release with the issue: 2.8.1

Last working release (if known):

Browser and Operating System: Firefox 128.0, Chrome 126.0.6478.128,

Description of problem: The console occasionally displays the error "this.hass is undefined," resulting in the clock weather card not loading. This issue is intermittent; at times, the error appears and the card loads successfully, while at other instances, everything functions normally without any errors. This problem primarily occurs during the initial loading of the dashboard. Reloading the dashboard (simple F5) usually resolves the issue, but not consistently.

Javascript errors shown in the web inspector (if applicable):

Firefox:

clock-weather-card - Error while rendering clock-weather-card component: TypeError: this.hass is undefined
    getWeather http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:251
    renderForecast http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:221
    render http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:198
    Ur http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:180
    render http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:198
    update http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:24
    performUpdate http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:12
    scheduleUpdate http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:12
    _$Ej http://homeassistant.local:8123/hacsfiles/clock-weather-card/clock-weather-card.js?hacstag=522634019281:12
clock-weather-card.js:180:189435

Chrome:

clock-weather-card - Error while rendering clock-weather-card component: TypeError: Cannot read properties of undefined (reading 'states')
    at Ro.getWeather (clock-weather-card.js?hacstag=522634019281:251:2724)
    at Ro.renderForecast (clock-weather-card.js?hacstag=522634019281:221:72)
    at clock-weather-card.js?hacstag=522634019281:198:30
    at Ur (clock-weather-card.js?hacstag=522634019281:180:189407)
    at Ro.render (clock-weather-card.js?hacstag=522634019281:198:17)
    at Ro.update (clock-weather-card.js?hacstag=522634019281:24:298)
    at Ro.performUpdate (clock-weather-card.js?hacstag=522634019281:12:5092)
    at Ro.scheduleUpdate (clock-weather-card.js?hacstag=522634019281:12:4739)
    at Ro._$Ej (clock-weather-card.js?hacstag=522634019281:12:4647)

Additional information:
Core 2024.7.2
Supervisor 2024.06.2
Operating System 12.4
Frontend 20240710.0

[pkissling]

hi @Marvinmsn,

i remember seeing a similar issue in #335. is there a chance that this issue is related to #335?

[Marvinmsn]

Hi @pkissling,
that's interesting. I did some more testing. My clock weather card is nested in a custom:vertical-stack-in-card which is nested in a normal vertical stack which is nested in a normal horizontal stack. Like this:

type: horizontal-stack
  type: vertical-stack
    type: custom:vertical-stack-in-card
      type: custom:clock-weather-card

If I remove one of the normal stacks, everything works fine. Replacing the custom:vertical-stack-in-card with a normal vertical stack also seems to work.

I have a lot of nested cards like this. But somehow clock weather loses the definition of this.hass along the way.