Latest version of Polymer has runtime bug after using polybuild

[markstewie]

In latest (v 1.2.2) after running polybuild through gulp there is a runtime error here....

// line 2998 of polymer.html
properties[m[1]] = (m[2] || m[3]).trim();

The runtime error says...

Uncaught TypeError: Cannot read property 'trim' of undefined

[ebidel]

1.2.3 just came out. Can you test against that? It resolved a few bugs.

[markstewie]

Unfortunately still a problem... done some debugging.. this is the info I can provide...

I've added debugging where it breaks.

while (m = rx.exec(cssText)) {
    if((m[2] || m[3]) == undefined) {
       debugger;
   }

At this point, just before it breaks the values of relevant variables are...

 // cssText
{display: -ms-flexbox;display: -webkit-flex;display: flex;};--layout-inline: {display: -ms-inline-flexbox;display: -webkit-inline-flex;display: inline-flex;};--layout-horizontal: {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-direction: row;-webkit-flex-direction: row;flex-direction: row;};--layout-horizontal-reverse: {-ms-flex-direction: row-reverse;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;};--layout-vertical: {display: -ms-flexbox;display: -webkit-flex;display: flex;-ms-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;};--layout-vertical-reverse: {-ms-flex-direction: column-reverse;-webkit-flex-direction: column-reverse;flex-direction: column-reverse;};--layout-wrap: {-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap;};--layout-wrap-reverse: {-ms-flex-wrap: wrap-reverse;-webkit-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;};--layout-flex-auto: {-ms-flex: 1 1 auto;-webkit-flex: 1 1 auto;flex: 1 1 auto;};--layout-flex-none: {-ms-flex: none;-webkit-flex: none;flex: none;};--layout-flex: {-ms-flex: 1 1 0.000000001px;-webkit-flex: 1;flex: 1;-webkit-flex-basis: 0.000000001px;flex-basis: 0.000000001px;};--layout-flex-2: {-ms-flex: 2;-webkit-flex: 2;flex: 2;};--layout-flex-3: {-ms-flex: 3;-webkit-flex: 3;flex: 3;};--layout-flex-4: {-ms-flex: 4;-webkit-flex: 4;flex: 4;};--layout-flex-5: {-ms-flex: 5;-webkit-flex: 5;flex: 5;};--layout-flex-6: {-ms-flex: 6;-webkit-flex: 6;flex: 6;};--layout-flex-7: {-ms-flex: 7;-webkit-flex: 7;flex: 7;};--layout-flex-8: {-ms-flex: 8;-webkit-flex: 8;flex: 8;};--layout-flex-9: {-ms-flex: 9;-webkit-flex: 9;flex: 9;};--layout-flex-10: {-ms-flex: 10;-webkit-flex: 10;flex: 10;};--layout-flex-11: {-ms-flex: 11;-webkit-flex: 11;flex: 11;};--layout-flex-12: {-ms-flex: 12;-webkit-flex: 12;flex: 12;};--layout-start: {-ms-flex-align: start;-webkit-align-items: flex-start;align-items: flex-start;};--layout-center: {-ms-flex-align: center;-webkit-align-items: center;align-items: center;};--layout-end: {-ms-flex-align: end;-webkit-align-items: flex-end;align-items: flex-end;};--layout-start-justified: {-ms-flex-pack: start;-webkit-justify-content: flex-start;justify-content: flex-start;};--layout-center-justified: {-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;};--layout-end-justified: {-ms-flex-pack: end;-webkit-justify-content: flex-end;justify-content: flex-end;};--layout-around-justified: {-ms-flex-pack: around;-webkit-justify-content: space-around;justify-content: space-around;};--layout-justified: {-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;};--layout-center-center: {-ms-flex-align: center;-webkit-align-items: center;align-items: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;};--layout-self-start: {-ms-align-self: flex-start;-webkit-align-self: flex-start;align-self: flex-start;};--layout-self-center: {-ms-align-self: center;-webkit-align-self: center;align-self: center;};--layout-self-end: {-ms-align-self: flex-end;-webkit-align-self: flex-end;align-self: flex-end;};--layout-self-stretch: {-ms-align-self: stretch;-webkit-align-self: stretch;align-self: stretch;};--layout-block: {display: block;};--layout-invisible: {visibility: hidden !important;};--layout-relative: {position: relative;};--layout-fit: {position: absolute;top: 0;right: 0;bottom: 0;left: 0;};--layout-scroll: {-webkit-overflow-scrolling: touch;overflow: auto;};--layout-fullbleed: {margin: 0;height: 100vh;}--layout-fixed-top: {position: fixed;top: 0;left: 0;right: 0;};--layout-fixed-right: {position: fixed;top: 0;right: 0;bottom: 0;};--layout-fixed-bottom: {position: fixed;right: 0;bottom: 0;left: 0;};--layout-fixed-left: {position: fixed;top: 0;bottom: 0;left: 0;};


 // m: Array[4]
0: ";--layout-fullbleed:"
1: "--layout-fullbleed"
2: ""
3: undefined
index: 3515
input: <same as cssText>

So you can clearly see there that the problem is that m[2] = "" & m[3] = undefined so (m[2] || m[3]) is definitely going to be undefined.

It's probably something I'm doing that causes the problem but not sure where to start looking.

[markstewie]

Found the problem!!!

There is a missing semicolon on line 301 of iron-flex-layout.html

--layout-fullbleed: {
  margin: 0;
  height: 100vh;
} // HERE

Thought there would be some kind of linting that would check for this?

Anyhow, would be appreciated if you could fix for next release.

[ebidel]

Good fine. Going to move this over there.

[ebidel]

This issue was moved to PolymerElements/iron-flex-layout#56