Полимер не является функцией: проблемы с развертыванием приложения Meteor / Blaze / Polymer 2

Последние 5-6 дней я потратил на перенос сравнительно большого, унаследованного приложения Polymer 0.5 на Polymer 2, и это было не просто.

Все было успешно в местном. При развертывании его в сети с новой версией, я получаю новый сюрприз, пользовательский интерфейс приложения не работает, и консоль заполнена сообщениями такого типа:

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

И список продолжается. Ошибки типа "Полимер не является функцией" происходят в коде этого типа:

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

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

Сначала я не могу понять, откуда берется разница между средой разработки и производственной средой. На вкладке "Сеть" я вижу, что все веб-компоненты поставщиков загружаются в одном и том же порядке и ни один запрос не выполняется. Это просто не работает в 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 и т. д.), это действительно единственный загрузочный код моего приложения. У меня нет контроля над этим. Метеор обнаруживает <head> и внедряет его, но создает само остальное, вставляет его таблицы стилей и т. д. Я не могу создать его сам. Я знаю, что это глупо. Я тоже не люблю Метеор или Блейз.

Я знаю, что Polymer рекомендует поместить корень приложения в <dom-module>в другом HTML-файле, загруженном с помощью импорта HTML и т. д., но я даже не могу этого сделать (благодаря Meteor) и не могу переписать все приложение (хотя мне бы хотелось).

Есть ли обходной путь? Я имею в виду, это работает в разработке. Что может вызвать это? Это происходит во всех браузерах.

Источник

1 ответ

Решение

Что ж, похоже, я очень устал в тот день, и, вернувшись к этой проблеме два дня спустя, я нашел и исправил проблему примерно за 20 минут.

В моем случае в моем bower.json отсутствовал пакет вебкомпонентных бауэров. Он был установлен на моей машине, но забыл его сохранить (bower i -S) к манифесту. Поэтому в производстве он не был установлен.

В моем конкретном случае моя установка Meteor отправляет 200 кодов состояния вместе с индексным файлом, когда запрошенный файл не найден. Это заставило замолчать ошибку, которую я обычно имел бы с отсутствующим пакетом. Но это делало сбой инициализации Polymer неявным образом.

Мораль это:

Дважды проверьте ваши пакеты! Версии, одноранговые зависимости, отсутствующие и т. Д.

По возможности, используйте другой менеджер пакетов, чем Bower (слишком плохой Polymer по-прежнему зависит от него) или npm, что довольно плохо, и просто используйте пряжу.

Источник
Другие вопросы по тегам