Polymer CSS files loading as different MIME type

[polonski]

Hi!

I've followed your instructions, which worked fine. I then installed iron-elements and paper-elements , which again worked ok. But when I try to run the project by using meteor , the following error appears:

it's from c9.io , so please ignore the URL references (the same error appears on my local Ubuntu test server)

Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/iron-component-page/iron-component-page.css". 
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-checkbox/paper-checkbox.css". 
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-dialog-behavior/paper-dialog-common.css".
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/iron-doc-viewer/iron-doc-viewer.css".
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-item/paper-item-shared.css".
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-radio-button/paper-radio-button.css". 
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-slider/paper-slider.css". 
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-drawer-panel/paper-drawer-panel.css". 
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-spinner/paper-spinner.css". 
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-toggle-button/paper-toggle-button.css". 
Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/iron-doc-viewer/iron-doc-property.css". 

The page appears mostly ok but the paper-drawer-panel doesn't work.

if i run meteor with VULCANIZE=true meteor this error does not appear but the paper-drawer-panel still doesn't work (behaves the same as it does with executing meteor alone)

The CSS file read failures above appear randomly when refreshing the page, and I am assuming that failure to load them results in the polymer not fully working.

I'm running the app here for your reference https://meteor-polonski.c9.io/

Code is available here https://github.com/polonski/c9-meteor together with a walk-through on how I set this up.

Many thanks Michal

[AndreasGalster]

Hi, those warnings are not errors, I've read a report on Polymer a few days ago, would be very hard for me to find though. It's just some internal browser stuff, this doesn't cause any errors but Chrome/browsers will log it nonetheless. They are aware of this issue but for now they haven't figured out a solution yet and I don't think it's on their urgency list, since it's not breaking anything (although they are aware this might confused developers and make them waste time on fixing a problem that's caused by something else).

[polonski]

Hi Andreas, Thanks for your reply. I'm curious then as to why some polymer elements are working ok (icons, buttons are ok) but others fail to work ( such as paper-drawer-panel) . This seems to be directly connected to this issue as the CSS files for the non-working elements truly fail to load and render the polymer controls such as paper-drawer-panel. I cannot find anything wrong with the HTML I've created here https://github.com/polonski/c9-meteor , but I could be wrong. If you're able to find anything wrong here, I'd really appreciate your advice.

[AndreasGalster]

Looking on mobile. It seems like you're not importing any custom elements nor the polyfill? Will check out later on desktop.

[polonski]

Thanks Andreas, I'm doing this https://github.com/polonski/c9-meteor#install--repro-sequence to setup the polymer elements, which automatically creates a list of dependencies in the bower.json file. I hope i'm missing something simple.

[schnie]

@polonski are you including the full shadow dom polyfill? The default shady dom polyfill won't handle changes to local dom via blaze/react, like if you are rendering a template inside of a drawer panel.

[AndreasGalster]

I think the issue is related to your html imports, not sure though. I've noticed issues with that. Can you try including your html imports manually but instead of having dozens of seperate html imports import them all from an imports.html file where all the other html imports are inside?

I am wondering if it's because you have too many html import requests. I think this was an issue related to iron:router which you don't seem to be using but it's worth testing anyway.

@schnie It should still work though. He's not changing any DOM in that case. The drawer should be opening.

There's also nothing wrong with your toggle trigger, just checked with document.querySelector('paper-drawer-panel').togglePanel()

[polonski]

thanks @schnie - so in effect you're saying not to use elements like paper-drawer-panel as they cannot be rendered correctly using blaze? I'm pretty sure i'm using shadow dom as changing it dynamically reveals differences: https://meteor-polonski.c9.io/a.html?dom=shadow vs https://meteor-polonski.c9.io/a.html?dom=shady

@AndreasGalster - I only enter a single command to install the polymer elements and their relative dependencies are automatically resolved and saved in the bower.json file into all the individual element references. So instead of the HTML imports, polymerize uses this method to try and wrangle references to polymer elements. There may be an order in which these dependencies are imported, but I'll be damned going through them all to figure out a loading order... there has to be a better way.

[AndreasGalster]

Does polymerize import ALL elements or can you say which elements to import? Right now it looks like it is loading a hell of a lot of elements, perhaps all. That's overkill. Anyway, if you can define which to import, just disable all elements for a moment and try and see what happens when you import them manually just for debugging.

[polonski]

@AndreasGalster so when I use bower install --save PolymerElements/iron-elements#^1.0.0 and bower install --save PolymerElements/paper-elements#^1.0.0
to install polymer elements; This does import all the elements automatically, but this should be fine shouldn't it? (even though its an overkill, it SHOULD work right?)

[AndreasGalster]

It should work yes. But like I said, I noticed issues with too many seperate html imports happening, although I believe this was an iron:router issue. But I just realized this can't be the issue. Your panel still behaves normal aside from that. I can't see any problem in your html file. Can you remove one of the paper-toggle attributes?

Aside from that, try to just import the drawer panel import and see if it still breaks.

[polonski]

thanks @AndreasGalster . So I've removed most of the element references, leaving only this:

{
  "name": "a",
  "private": true,
  "dependencies": {
    "webcomponentsjs": "^0.7.2",
    "polymer": "Polymer/polymer#^1.0.0", "iron-icon": "PolymerElements/iron-icon#^1.0.0",
    "iron-icons": "PolymerElements/iron-icons#^1.0.0",
   "paper-button": "PolymerElements/paper-button#^1.0.0",
    "paper-drawer-panel": "PolymerElements/paper-drawer-panel#^1.0.0",
    "paper-header-panel": "PolymerElements/paper-header-panel#^1.0.0",
    "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
   "paper-menu": "PolymerElements/paper-menu#^1.0.0",
    "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0"

  },
  "overrides": {}
}

but still the behaviour is the same with the only error being this:

Resource interpreted as Document but transferred with MIME type text/css: "https://meteor-polonski.c9.io/bower_components/paper-drawer-panel/paper-drawer-panel.css".

Which is the only element not working.

The same thing happens if I remove the paper-drawer-panel reference from the bower.json file and import into the html:

<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">

Same error about not being able to load the CSS file for paper-drawer-panel

arkh

[AndreasGalster]

Again, the issue is not the css here. Can you do me a favor? Convert your meteor app in a normal html site. Just create a standard html document with the drawer panel import + polyfill and hardcode your drawer panel in the html file. If it still breaks, then there's a bug in Polymer not Meteor and you could file this in the polymer / paper-drawer-panel github repository. I've just noticed you're at 0.7.2 for webcomponents by the way. 0.7.7 is the latest though.

[AndreasGalster]

https://github.com/Polymer/polymer/issues/1712

[polonski]

thanks @AndreasGalster for the pointer to the bug. I'll keep an eye on it.

For the record using just HTML imports by themselves yields the same results as before (CSS warning, paper-drawer-panelnot working...) I understand that this is not the cause but only a symptom of it in Chrome. It just seems like one of those issues which will get weeded out as Polymer matures.

[AndreasGalster]

Actually that's not a polymer issue but a html imports issue I guess. But yes, I'm sure this will get fixed eventually.

Hmm well your code should work. But everything works fine for me. If you can upload your normal html files I'll have a look at it later in detail.

[polonski]

@AndreasGalster I've removed polymerize and imported the polymer inside the a.html file now. It didn't seem to make a difference. It's now pushed to here https://github.com/polonski/c9-meteor