circle-sensor-card

circle-sensor-card copied to clipboard

Hi, from HA version 0.110 i got this error Cannot read property 'states' of undefined

To add some more information. I'm also getting this error message after upgrading to 0.110.x

From the logs:

Log Details (ERROR)
Logger: frontend.js.latest.202005195
Source: components/system_log/__init__.py:209
First occurred: 1:22:38 PM (86 occurrences)
Last logged: 5:12:04 PM

https://myha.url.com:####/hacsfiles/circle-sensor-card/circle-sensor-card.js:76:79 Uncaught TypeError: Cannot read property 'state' of undefined
https://myha.url.com:####/lovelace/5:1:825 Uncaught TypeError: Cannot read property 'disconnect' of null
https://myha.url.com:####/lovelace/3:1:825 Uncaught TypeError: Cannot read property 'disconnect' of null

As far as I can tell, the 3 different entities I'm using with this card all have a valid state. Not sure what else to provide but happy to help debug if needed.

I'm by no means a javascript expert but I did some poking and it looks like in some iterations of the _render function the state object itself is passed undefined thus throwing the error when state.state tries to get resolved on line 76.

I added a work around to my local copy that seems to fix the error message. There is likely a better / proper way of fixing this but this seems to work for the time being and my meters are rendering correctly still.

First I added this block of code to the beginning of the _render function and before the return:

	var stateval;
	if (state === undefined) {
	  stateval = 0;
	} else {
          stateval = state.state;
	}

Then I changed the reference to state.state on line 76 (before the above changes are added) to stateval. Save the changes then clear browser cache and reload the HA site.

I'm by no means a javascript expert but I did some poking and it looks like in some iterations of the _render function the state object itself is passed undefined thus throwing the error when state.state tries to get resolved on line 76.

I added a work around to my local copy that seems to fix the error message. There is likely a better / proper way of fixing this but this seems to work for the time being and my meters are rendering correctly still.

First I added this block of code to the beginning of the _render function and before the return:

	var stateval;
	if (state === undefined) {
	  stateval = 0;
	} else {
          stateval = state.state;
	}

Then I changed the reference to state.state on line 76 (before the above changes are added) to stateval. Save the changes then clear browser cache and reload the HA site.

this worked for me , thanks for the fix @heymoe

Then I changed the reference to state.state on line 76 (before the above changes are added) to stateval. Save the changes then clear browser cache and reload the HA site.

I'm not a js programmer, line 76 should be:

${config.attribute ? state.attributes[config.attribute] : stateval}

This because after added this also :

I have the same errors.

Thank you in advance.

@alegiovannelli

It looks like you made the changes correctly. The only think that looks out of place which could just be due to your text editor or what not from your screenshot is that in your screenshot you have addition text after the closing "}" of the else ("| you, 10 minutes ago * Uncommitted" ) which code wise shouldn't be there and the 3 equal signs in the If statement looks like a single long 3 lines but that could just be the font you're using. Also it does say the changes were uncommitted so maybe you didn't save them yet / make the active on the server? Did you also clear your browser cache and restart HA after making the changes?

Here is the full _render function with the changes in it.:

  _render({ state, dashArray, config }) {
	var stateval;
	if (state === undefined) {
	  stateval = 0;
	} else {
      stateval = state.state;
	}
    return html`
      <style>
          :host {
            cursor: pointer;
          }

          .container {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
          }

          .labelContainer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
          }
          
          #label {
            display: flex;
            line-height: 1;
          }
          
          #label.bold {
            font-weight: bold;
          }
          
          #label, #name {
            margin: 1% 0;
          }

          .text, #name {
            font-size: 100%;
          }
          
          .unit {
            font-size: 75%;
          }

      </style>
      <div class="container" id="container" on-click="${() => this._click()}">
        <svg viewbox="0 0 200 200" id="svg">
          <circle id="circle" cx="50%" cy="50%" r="45%"
            fill$="${config.fill || 'rgba(255, 255, 255, .75)'}"
            stroke$="${config.stroke_color || '#03a9f4'}"
            stroke-dasharray$="${dashArray}"
            stroke-width$="${config.stroke_width || 6}" 
            transform="rotate(-90 100 100)"/>
        </svg>
        <span class="labelContainer">
          ${config.name != null ? html`<span id="name">${config.name}</span>` : ''}
          <span id="label" class$="${!!config.name ? 'bold' : ''}">
            <span class="text">
              ${config.attribute ? state.attributes[config.attribute] : stateval}
            </span>
            <span class="unit">
              ${config.show_max
                ? html`&nbsp/ ${config.attribute_max ? state.attributes[config.attribute_max] : config.max}`
                : (config.units ? config.units : state.attributes.unit_of_measurement)}
            </span>
          </span>
        </span>
      </div>
    `;
  }

How exactly do you get HA to accept the changes? I changed the file, but when I go to https://xxxx.xxxxxxx.xxxx:8123/hacsfiles/circle-sensor-card/circle-sensor-card.js, the information shown is the old information. Check the file again, and it shows the updated information. I have restarted and cleared the browser cache more times that I can count, but the new config doesn't seem to be loaded. And I've tried different browsers. What am I missing?

I also had the same problem. Today I made the correction of the code as indicated by @heymoe both on the circle-sensor-card.js file present in the circle-sensor-card directory, and on the circle-sensor-card.js file present inside circle-sensor-card.js.gz. I restarted, cleared the cache and the error disappeared. I hope it will help.

This worked perfectly! I've been pulling my hair out the last few days with this and another file. This fixed both of them. I seriously cannot thank you enough!!!!

Fixed mine as well, thanks! I don't know how Home Assistant handles the cache but I restarted and did a hard refresh and got the same old script. It was easier to change the filename slightly (I append a different letter for each change) then update the resource path in /config/lovelace/resources, which forces Home Assistant to look for the new file.

Hi guys, anything for Uncaught TypeError: Cannot read property 'attributes' of undefined? :slightly_smiling_face:

This happens if you didn't specify a valid sensor

@Subtixx Well, that's odd, because i specified (what i think is) a valid sensor, the card even works but i'm getting this error from time to time.

Getting this too.

the sensor absolutely has a value

unless this only happens on loading? maybe this sensor has loaded in right away and then it throws this error?

`Logger: frontend.js.latest.202105040 Source: components/system_log/init.py:190 First occurred: 18:08:52 (6 occurrences) Last logged: 18:54:24

http://homeassistantssd.local:8123/hacsfiles/circle-sensor-card/circle-sensor-card.js:76:79 Uncaught TypeError: Cannot read property 'state' of undefined`

Why does this not got fixed with the solution of @heymoe

Gotta remember to do this each time i update. Thanks for the solve once again.

Hi @iantrich, I've added a PR for this.