Polymer 不是函数：部署 Meteor/Blaze/Polymer 2 应用程序时遇到问题

Question

我花了最后 5-6 天的时间将一个相对较大的遗留 Polymer 0.5 应用程序迁移到 Polymer 2，这不是小菜一碟。

本地一切顺利。当使用新版本在线部署时，我得到了一个新的惊喜，应用程序的 UI 被破坏并且控制台充满了这种类型的消息：

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

这样的例子不胜枚举。 "Polymer is not a function" 类型的错误发生在这种类型的代码上：

  <script>
    (function() {
      'use strict';

      Polymer({ <=======
        is: 'paper-toast',

我首先无法理解的是开发环境和生产环境之间的差异从何而来。在“网络”选项卡中，我可以看到所有供应商 Web 组件都以相同的顺序加载，并且没有请求失败。它只是在产品中不起作用，这使得调试变得复杂。

这是一个 Meteor 应用程序，带有 Blaze 和 Polymer（我知道那是一种糟糕的鸡尾酒）。

代码大致如下：

imports.html（简体）

<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（应用程序根视图，简化）

<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> 小胡子标签是 Blaze 的东西。

您可以注意到我没有 <body>、<html> 或其他包含（对于 Meteor 等），这实际上是我的应用程序的唯一引导代码。我对此无能为力。 Meteor 检测到 <head> 并注入它，但自己创建其余部分，插入其样式表等。我自己无法创建它。我知道这很愚蠢。我也不喜欢 Meteor 和 Blaze。

我知道 Polymer 建议将应用程序根目录放在 <dom-module> 中，在另一个 HTML 文件中，加载 HTML 导入等，但我什至不能这样做（感谢 Meteor），我也无法重写整个应用程序（尽管我愿意）。

有解决办法吗？我的意思是，它正在开发中。什么会导致这个？它发生在所有浏览器中。

Answer 1

看来那天我很累，两天后回来解决这个问题，我在大约 20 分钟内找到并解决了问题。

就我而言，我的 bower.json 中缺少一个 webcomponent bower 包。它安装在我的机器上，但忘记将它 (bower i -S) 保存到清单中。在生产中，因此没有安装它。

在我的特殊情况下，当找不到请求的文件时，我的 Meteor 设置会发送 200 个状态代码和索引文件。这消除了我通常会因丢失包裹而出现的错误。但它以非显式方式使 Polymer 初始化崩溃。

寓意是：

仔细检查你的包！！ 版本、对等依赖、缺失等

如果可能，使用其他包管理器而不是 Bower（可惜 Polymer 仍然依赖于它）或 npm，它们非常糟糕，并且 just use yarn.

Polymer 不是函数：部署 Meteor/Blaze/Polymer 2 应用程序时遇到问题

Polymer is not a function : troubles deploying a Meteor / Blaze / Polymer 2 application

meteor

polymer

meteor-blaze

html-imports

polymer-2.x