Cannot read property of undefined

[steve-o]

Description

Uncaught TypeError: Cannot read property '_redacted_' of undefined
    at HTMLElement._getProperty (properties-changed.js:243)
    at HTMLElement.get (properties-changed.js:140)
    at saveAccessorValue (property-accessors.js:48)
    at HTMLElement._definePropertyAccessor (property-accessors.js:284)
    at HTMLElement._createPropertyAccessor (properties-changed.js:108)
    at HTMLElement._bindTemplate (property-effects.js:2361)
    at Function._finalizeTemplate (element-mixin.js:519)
    at HTMLElement._initializeProperties (element-mixin.js:459)
    at new PropertiesChanged (properties-changed.js:160)
    at new PropertyAccessors (property-accessors.js:112)

Occurs with a combination of nested extended elements and mixins. The property in question is common to many of the elements.

Porting project from Polymer v1 to v3.

Live Demo

http://ahyoomee.miru.hk/zignage-polymer3/q.html

Examples are available of all the individual elements working alone and of the v1 implementation.

Expected Results

No error.

Browsers Affected

• Chrome
• Firefox
• Edge
• Safari 11
• Safari 10
• IE 11

Versions

• Polymer: v3.0.2
• webcomponents: v2.0.0

[TimvdLippe]

There are a lot of files in the live demo. Could you create a JSBin that shows the minimal amount of code that reproduces the issue? That allows us to debug the issue.

[steve-o]

Looks like it is due to overriding observers, new test page: http://ahyoomee.miru.hk/zignage-polymer3/test/

outer-container
├── inner-container
│  ├── gen1-element
│  ├── gen2-element
│  └── gen3-element
├── gen4-element
└── gen5-element

Noting that the inner-container does not crash on it's own: http://ahyoomee.miru.hk/zignage-polymer3/test/inner-only.html

[TimvdLippe]

That's still a lot of files and I am having trouble understanding where the observers would be going wrong. Please use this JSBin to create a live example with as minimal amount of code as possible.

[steve-o]

Do you have a Polymer v3 JSBin?

Probably an interesting sign, bundling all the classes into one file eliminates the issue: http://ahyoomee.miru.hk/zignage-polymer3/test/bundle.html

[jsilvermist]

As listed on https://www.polymer-project.org/3.0/docs/about_30#trying-3.0, you can use any of the following:
StackBlitz
Glitch
JSBin
CodePen

[steve-o]

#JSBin seems non-functional for ES6 imports, StackBlitz appears better, here is the test case with the majority of the elements inside one JS file but the container element separate. Of note if the container and contained elements are presented in the same file the reported bugs disappear.

Updated example:

https://polymer-element-example-bnqh2u.stackblitz.io

@jsilvermist, @TimvdLippe Please update the "new issue" page with the new links making clear the changes between Polymer versions 2 and 3.

[steve-o]

Sometimes it looks like stackblitz.io breaks on that link, loading up the edit page appears to fix that:

https://stackblitz.com/edit/polymer-element-example-bnqh2u

Otherwise you see a blank page and this:

(index):1 Uncaught (in promise) Error: Unexpected token {
  Evaluating https://unpkg.com/@polymer/[email protected]/polymer-element.js
  Evaluating https://polymer-element-example-bnqh2u.stackblitz.io/tmp/appfiles/index.js
  Loading blitzapp
    at eval (<anonymous>)
    at Te (engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:1)
    at engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:2
    at S (engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:1)
    at w (engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:1)
    at w (engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:1)
    at E (engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:1)
    at engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:2

Example on Glitch: https://glistening-nickel.glitch.me/

[steve-o]

The last example still yields these errors in the console:

properties-changed.js:261 Uncaught TypeError: Cannot read property 'esignal_feed' of undefined
    at HTMLElement._getProperty (properties-changed.js:261)
    at HTMLElement.get (properties-changed.js:149)
    at saveAccessorValue (property-accessors.js:49)
    at HTMLElement._definePropertyAccessor (property-accessors.js:311)
    at HTMLElement._createPropertyAccessor (properties-changed.js:113)
    at HTMLElement._bindTemplate (property-effects.js:2647)
    at Function._finalizeTemplate (element-mixin.js:566)
    at HTMLElement._initializeProperties (element-mixin.js:498)
    at new PropertiesChanged (properties-changed.js:172)
    at new PropertyAccessors (property-accessors.js:115)
[15]property-effects.js:635 Uncaught TypeError: Cannot read property '0' of undefined
    at Object.runBindingEffect [as fn] (property-effects.js:635)
    at runEffectsForProperty (property-effects.js:169)
    at runEffects (property-effects.js:131)
    at HTMLElement._propagatePropertyChanges (property-effects.js:1933)
    at HTMLElement._propertiesChanged (property-effects.js:1891)
    at HTMLElement._flushProperties (properties-changed.js:370)
    at HTMLElement._flushProperties (property-effects.js:1731)
    at HTMLElement.ready (property-effects.js:1847)
    at HTMLElement.ready (element-mixin.js:605)
    at HTMLElement.ready (bundle.js:59)

[Milan-Eufina]

Any solutions or workarounds for this issue? We are having the same problem extending paper-dropdown-menu:

Uncaught TypeError: Cannot read property 'label' of undefined
    at HTMLElement._getProperty (properties-changed.js:274)
    at HTMLElement.get (properties-changed.js:157)
    at saveAccessorValue (property-accessors.js:48)
    at HTMLElement._definePropertyAccessor (property-accessors.js:311)
    at HTMLElement._createPropertyAccessor (properties-changed.js:119)
    at HTMLElement._bindTemplate (property-effects.js:2645)
    at Function._finalizeTemplate (element-mixin.js:630)
    at HTMLElement._initializeProperties (element-mixin.js:562)
    at HTMLElement._initializeProperties (legacy-element-mixin.js:198)
    at new PropertiesChanged (properties-changed.js:180)

Overriding PropertiesChanged._getProperty() would work around this issue. But that sounds realy dirty.

_getProperty(property) {
  return this.__data ? this.__data[property] : undefined;
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.