I spent the last 5-6 days to migrate a relatively big, legacy Polymer 0.5 application to Polymer 2, and that was not a piece of cake.
Everything was successful in local. When deploying it online with the new version, I get a new surprise, the application's UI is broken and the console is filled with this type of messages:
Uncaught TypeError: Polymer is not a function
at iron-meta.html:125
at iron-meta.html:215
iron-icon.html:146 Uncaught TypeError: Cannot read property 'create' of undefined
at iron-icon.html:146
iron-iconset-svg.html:50 Uncaught TypeError: Polymer is not a function
at iron-iconset-svg.html:50
iron-pages.html:56 Uncaught TypeError: Polymer is not a function
at iron-pages.html:56
iron-image.html:145 Uncaught TypeError: Polymer is not a function
at iron-image.html:145
paper-card.html:167 Uncaught TypeError: Polymer is not a function
at paper-card.html:167
paper-toolbar.html:292 Uncaught TypeError: Polymer is not a function
at paper-toolbar.html:292
paper-ripple.html:440 Uncaught TypeError: Polymer is not a function
at paper-ripple.html:440
at paper-ripple.html:764
paper-button.html:170 Uncaught TypeError: Polymer is not a function
at paper-button.html:170
paper-checkbox.html:239 Uncaught TypeError: Polymer is not a function
at paper-checkbox.html:239
iron-overlay-backdrop.html:62 Uncaught TypeError: Polymer is not a function
at iron-overlay-backdrop.html:62
at iron-overlay-backdrop.html:166
iron-overlay-manager.html:48 Uncaught TypeError: Cannot read property 'add' of undefined
at new Polymer.IronOverlayManagerClass (iron-overlay-manager.html:48)
at iron-overlay-manager.html:382
And the list goes on. Errors of the type "Polymer is not a function" happen on this type of code:
<script>
(function() {
'use strict';
Polymer({ <=======
is: 'paper-toast',
What I can't understand first is from where the difference between the dev and production environments comes from. In the Network tab, I can see that all vendor webcomponents are loaded in the same order and no requests are failing. It just doesn't work in prod, and that makes debugging complicated.
It is a Meteor app, with Blaze and Polymer (that's a bad cocktail, I know).
The code roughly looks like this:
imports.html (simplified)
<head>
<script>
window.Polymer = {
lazyRegister: true
};
</script>
<!-- Webcomponents Polyfill -->
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- Polymer elements -->
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/app-layout/app-layout.html">
<link rel="import" href="/bower_components/iron-collapse/iron-collapse.html">
<!-- etc -->
</head>
app.html (application root view, simplified)
<template name="applicationLayout">
<app-drawer-layout>
<!-- Left title and menu -->
<app-drawer slot="drawer">
<app-toolbar></app-toolbar>
{{>menu}}
</app-drawer>
<!-- Main content, page, router yielder -->
<app-header-layout>
<app-header slot="header">
<app-toolbar>
<div>{{>topBarMenus}}</div>
</app-toolbar>
</app-header>
<div>{{>yield}}</div>
</app-header-layout>
</app-drawer-layout>
</template>
<template> and the mustache tags are Blaze things.
You can notice that I have no <body>, <html> or other includes (for Meteor, etc), this is really the only bootstrapping code of my app. I have no control on this. Meteor detects <head> and injects it, but creates the rest itself, inserts its stylesheets, etc. I can't create it myself. I know it's stupid. I don't like Meteor or Blaze either.
I know that Polymer recommends to put the application root in a <dom-module>, in another HTML file, loaded with an HTML import, etc, but I can't even do that (thanks to Meteor), nor I can rewrite the whole app (although I'd like to).
Is there a workaround? I mean, it's working in development. What could cause this? It happens in all browsers.
Well it seems that I was very tired that day, and after coming back to this problem two days later, I've found and fixed the problem in like, 20 minutes.
In my case, there was a missing webcomponent bower package in my bower.json. It was installed on my machine but forgot to save it (bower i -S) to the manifest. In production, it was therefore not installed.
In my particular case, my setup of Meteor sends 200 status codes with the index file when the requested file isn't found. That silenced the error I would normally have with a missing package. But it was making the Polymer initialization crash in a non-explicit manner.
The moral is:
Double check your packages!! Versions, peer dependencies, missing ones, etc.
When possible, use another package manager than Bower (too bad Polymer still depends on it) or npm, that are quite bad, and just use yarn.