Error "a.__shady is undefined" - Prod build NOT working on Firefox, IE and Edge

[firstor]

The app gets loaded in development mode, but not work in production mode for Firefox, IE and Edge browsers, and the browser console prints out the following error:

ERROR TypeError: a.__shady is undefined
Stack trace:
Rb@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:59:218
La@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:57:152
insertBefore@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:120:445
Xc/<@http://local.polymer-chat.com/assets/bower_components/webcomponentsjs/webcomponents-hi-sd-ce.js:40:211
n@http://local.polymer-chat.com/assets/components.html-13.js:1:2401
value@http://local.polymer-chat.com/assets/components.html-13.js:1:3091
value@http://local.polymer-chat.com/assets/components.html-24.js:1:1403
l@http://local.polymer-chat.com/assets/components.html-10.js:1:865
q@http://local.polymer-chat.com/assets/components.html-11.js:1:1075
Pe@http://local.polymer-chat.com/assets/components.html-12.js:1:8626

The error comes after the modules and web components were upgraded and everything worked fine before upgrade.

[firstor]

Found that this is a webcomponentsjs bug. This bug came after Polymer was upgraded from v2.0.1 to v2.0.2 since Polymer v2.0.2 requires webcomponentsjs v1.0.3.

So before they fix this bug and release a patch or fix for it, degrading webcomponentsjs might be a unique workaround right now:

Related articles:

• Firefox: a.__shady is undefined webcomponents/webcomponentsjs#811
• In Firefox: shadycss is undefined Polymer/polymer#4739

[firstor]

This workaround works fine on FF and Edge but not IE. Got new problem found on IE.

• Changes in bower.json:

  {
    ...
    "dependencies": {
      "polymer": "Polymer/polymer#2.0.2",
      "paper-input": "PolymerElements/paper-input#2.0.1",
      "paper-button": "PolymerElements/paper-button#2.0.0",
      "paper-dialog": "PolymerElements/paper-dialog#2.0.0",
      ...
      "webcomponentsjs": "webcomponents/webcomponentsjs#1.0.1"  /* <= my attempt to downgrade */
    },
    "resolutions": {
      "webcomponentsjs": "1.0.1" /* <= my attempt to downgrade */
    }
  }
  

• New problem found on IE 11 (the browser console outputs)

  SCRIPT5007: Unable to get property 'replaceChild' of undefined or null reference
  SCRIPT5022: A custom element with name 'dom-module' has already been defined.
  SCRIPT5022: A custom element with name 'dom-bind' has already been defined.
  SCRIPT5022: A custom element with name 'dom-repeat' has already been defined.
  SCRIPT5022: A custom element with name 'dom-if' has already been defined.
  SCRIPT5022: A custom element with name 'array-selector' has already been defined.
  SCRIPT5022: A custom element with name 'custom-style' has already been defined.
  ...
  

[firstor]

The new problem is related with this issue: webcomponents/webcomponentsjs#518

[firstor]

The new error A custom element with name 'dom-module' has already been defined. is related with zone.js. The error happened when used zone.js v0.8.14 or v0.8.16. It's been completely fixed with zone.js v0.8.12 and webcomponentsjs v1.0.1.

[firstor]

Fixed with PR #27