Polymer components Shady DOM styles are simply comments on production

1
votes

I have been chasing this error for a while. On development everything is working well, when pushed to Heroku for production it is not. I am using sails on the backend but that is not an issue since this is a client side problem. Worst part is this has been working and only broke a couple days ago. Tracing my steps back did not prove to find the cause.

Long story short pictures may help in case anyone has seen this before.

When loading the app on production these errors start showing up"

Console errors

This was confusing as I was not getting this locally on development. Having run into issues in the past with js concat and minification I turned that off for production. Still same errors. Then I noticed this difference between the head of production and development:

Production: Production head showing shady DOM

Development

Development head showing shady Dom

Next I checked my links to the polymer components I am adding on load and dynamically for the initial page. Both production an development were the same:

Polymer imports

Next I tried dynamically importing a polymer component using Polymer.Base.importHref('/vendor/paper-checkbox/paper-checkbox.html'). After importing the shady DOM styles added to the head was different for production and development

Production:

Added shady dom style production

Development:

enter image description here

Lastly when I then created a paper-checkbox element with document.createElement('paper-checkbox') things worked fine locally on development. On production, error as before:

enter image description here

I am stuck here. If anyone has seen this before and has insight I appreciate it.

1
javascriptpolymerpolymer-1.0paper-elementsshady-dom

1 Answers

1
votes

I have fixed the problem, though there may be another issue that will need to checked with Polymer. In my many deploys I noticed in one of the build logs that the version number installed for Polymer was different than what I had in my bower.json file and local system. The minor version jumped from 1.3.1 to 1.4.0. My bower.json used ^ instead of ~. The ^ allows changes to all but the leftmost version number while the ~ only allows patch level changes.

Original bower.json:

Original bower.json

New bower.json:

New bower.json

Thought I would give it a try. Once I deployed polymer 1.3.1 was installed and my site was back up and working. Hopefully this helps someone in the future.