0

在过去的 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 组件都以相同的顺序加载，并且没有请求失败。它只是在 prod 中不起作用，这使得调试变得复杂。

这是一个 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），我也不能重写整个应用程序（虽然我想）。

有解决方法吗？我的意思是，它正在开发中。什么可能导致这种情况？它发生在所有浏览器中。

4

1 回答 1

1

好吧，那天我好像很累，两天后回到这个问题后，我发现并解决了这个问题，大约20分钟。

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

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

道德是：

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

如果可能的话，使用另一个包管理器而不是 Bower（太糟糕了 Polymer 仍然依赖它）或 npm，它们非常糟糕，只使用 yarn。

于 2018-01-12T08:58:36.363 回答