In Firefox: shadycss is undefined

[fooloomanzoo]

In Polymer^2.0.2 and the related update to webcomponents^1.0.3 when using Firefox, this error occures:

TypeError: a.__shady is undefined

see webcomponentsjs/issues/811

[fooloomanzoo]

So you shouldn't use webcomponents^1.0.3. Instead you should explicitly depend on webcomponents^1.0.1 until this issue in webcomponents is fixed, when you are using polymer.

[firstor]

@fooloomanzoo

I got the same problem with my app. The app includes Polymer v2.0.2 and so it also includes webcomponents 1.0.3. I downgraded webcomponentsjs to v1.0.1, but it doesn't work 100% case for me.

Here is what I tried 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 */
  }
}

So the problem seems fixed, but my app still doesn't work on IE 11. The browser console prints out the following error:

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.
...

[shawnd]

Downgrading to Polymer 2.0.1 and webcomponentsjs 1.0.1 did stop the error TypeError: a.__shady is undefined

However, I'm now getting the same error as @First87 regarding custom elements already being defined. This is solved by building with "bundle": false but I'm curious as to a real solution.

[firstor]

@shawnd "bundle": false can't be a solution to me since I utilize bundling for production build.

[shawnd]

@First87 Agreed, I need to be able to bundle as well so this isn't a solution. This is simply a work around for the team being.

[firstor]

@shawnd Though it can't be a solution to me, I tried to build with "bundle": false, but IE problem never disappeared. How could you downgrade webcomponentsjs? Could you share a bit of your bower.json just as I did?

[shawnd]

@First87 I simply removed the caret ^ character to lock the version in

"polymer": "Polymer/polymer#2.0.1",
"webcomponentsjs": "webcomponents/webcomponentsjs#1.0.1

[sorvell]

Should be fixed by https://github.com/webcomponents/webcomponentsjs/releases/tag/v1.0.4. Please re-open with more info if the problem persists.

[firstor]

@sorvell I could upgrade webcomponentsjs to v1.0.4, but it still doesn't work on IE and the browser console prints out the same error in the following:

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.
...

[fooloomanzoo]

@First87 what worked for me looks in the dependencies like:

{
  ...
  "dependencies": {
    "polymer": "polymer/polymer#2.0.2",
    "app-layout": "polymerelements/app-layout",
    "datetime-picker": "fooloomanzoo/datetime-picker",
    "fetch": "*",
    "es6-promise": "*",
    "webcomponentsjs": "webcomponentsjs#1.0.1"
  },
  "devDependencies": {
    "web-component-tester": "^6.0.0-prerelease.6"
  },
  "resolutions": {
    "polymer": "1.9 - 2",
    "webcomponentsjs": "^v1.0.1"
  }
  ...
}

[shawnd]

@fooloomanzoo my concern with your dependencies is that you're using Polymer 2.0.2, but it depends on webcomponentsjs 1.0.2 and you're using 1.0.1

https://github.com/Polymer/polymer/releases/tag/v2.0.2

[fooloomanzoo]

@shawnd it is working completely in my case. The update procedure depends on how bower is managing an install or update request. It can only be temporarely because It makes sense to update your depencies until you release something. But there is also now an update out (webcomponents 1.0.4), so that could solve this bug, let's see

[fooloomanzoo]

@First87 webcomponentsjs v1.0.4 in IE11 are just working for me in compiled version

[shawnd]

Yup @fooloomanzoo 1.0.4 was released to address the aforementioned problems.

[fooloomanzoo]

@shawnd redundant

[firstor]

@fooloomanzoo @shawnd
I am still getting trouble with IE. Could you review my sample project and make it work fine? My sample project: https://github.com/first87/polymer-chat/commits/fix/shady-error-on-prod-build

[fooloomanzoo]

@First87 I have to correct my answer. I don't get the same error message like you, but I get messages that Promise has no property all, so the Promise polyfill is not loaded correctly when built, bundled and compiled. In your app, I couldn't see anything that would in my opinion not be working.