Search code examples
google-chromepolymergoogle-chrome-appweb-componentchrome-dev-editor

Sample polymer-enabled Chrome App not running


I just installed Chrome Dev Editor and gave it a try with one of the sample templates:

  • New Project >> Project Type = JavaScript Chrome App (using Polymer paper elements) >> Create
  • Right-click >> Refactor for CSP
  • Click on Run (black arrow)

A window opens with what seems to be the sample Polymer app, without Polymer features (only html markup). Here is what the Console reports in Developer Tools:

extensions::platformApp:31 Uncaught Error: document.write() is not available in packaged apps.
index.html:338 GET chrome-extension://fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en net::ERR_FAILED
core-resizable.html.0.js:95 Uncaught TypeError: undefined is not a function
polymer.html.0.js:5 Uncaught TypeError: Cannot read property 'parentNode' of undefined
unresolved.js:30 Uncaught ReferenceError: Platform is not defined
queue.js:138 Uncaught ReferenceError: CustomElements is not defined

I find it quite surprising that sample apps bundled with the IDE do not work out of the box, so I guess I must be doing something wrong somewhere...

My question is : does anyone know what changes i should make to the sample code or to my configuration to have it run properly?

Thanks

Note: might be useful, I'm using Chrome Version 39.0.2171.71 m


Solution

  • TL;DR

    To fix, just update your Chrome Dev Editor and make sure it's at version 0.18.3465 in the About dialog (to update, just relaunch the app the app: that should be sufficient). 0.18.3465 is a hot fix I've just pushed to the Chrome Web Store.

    Details

    The immediate problem was triggered by the bleeding edge Polymer sources that very recently broke compatibility with Chrome Apps in a few places.

    On the other hand, Chrome Dev Editor 0.18 was supposed to pin down the Polymer version used in the templates to the latest stable release, denoted as ...#latest in all Polymer package specifications inside the bower.json of a generated project. However, it contained a bug that sometimes (just after a fresh installation) generated bower.json's pointing at the bleeding edge Polymer, denoted as ...#master. So the above-mentioned hot fix was just fixing that bug.

    Just to be sure, you could look in the bower.json of a newly generated project and see what's in there. If the problem persists, please file a bug at https://github.com/dart-lang/chromedeveditor/issues/new.