Polymer 3 "Uncaught ReferenceError: Полимер не определен" - PullRequest
Новая
       35

Polymer 3 "Uncaught ReferenceError: Полимер не определен"

0 голосов
/ 07 июня 2018

Я новичок в полимере, и у меня возникла следующая проблема после запуска "полимерная сборка", а при запуске "полимерная сборка / сборка в комплекте" в браузере возникает следующая ошибка:

Uncaught ReferenceError: Полимер не определен

Я заметил, что если я отключу пакет Polymer.json, ошибка не появится.

Может кто-нибудь помочь мне, пожалуйста?

Я использую Polymer-3 и Redux, этот проект изначально был построен с использованием полимера-2, но я выполнил преобразование, и он прекрасно работает, когда я запускаю перед сборкой.

Это полимер .json 

{ 
  "entrypoint": "index.html",
  "shell": "src/components/conversion-today-app/conversion-today-app.js",
  "sources": [
    "src/**/*",
    "images/**/*",
    "robots.txt",
    "sitemap.xml",
    "coinzilla-354635a9db1dbd05d0.txt" 
  ], 
  "extraDependencies": [
    "manifest.json",
    "node_modules/web-animations-js/**",
    "node_modules/@webcomponents/webcomponentsjs/**",
    "node_modules/@polymer/polymer/**"

  ],
  "builds": [
    {
      "name": "esm-bundled",
      "browserCapabilities": [
        "es2015",
        "modules"
      ],
      "js": {
        "minify": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      },
      "bundle": true,
      "addServiceWorker": true
    }
  ]
}

Часть компонента, в которой ошибка 

// Principais // Bibliotecas
import { PolymerElement,html } from '@polymer/polymer/polymer-element.js';
// import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
import { connect } from 'pwa-helpers/connect-mixin.js';


// pwa helper
import { installOfflineWatcher } from 'pwa-helpers/network.js';

// ---------- Redux ----------

// This element is connected to the redux store.
import { store } from '../../store.js';

// These are the actions needed by this element.
import { addCoin } from '../../actions/converter.js';
import converter from '../../reducers/converter.js';

import { fetchCrypto } from '../../actions/cryptoCoins.js';
import { fetchCurrencyState } from '../../actions/stateCoins.js';

// We are lazy loading its reducer.
import cryptoCoins from '../../reducers/cryptoCoins.js';
import stateCoins from '../../reducers/stateCoins.js';

store.addReducers({
   stateCoins, cryptoCoins
});



// Componentes de Terceiros
import '@polymer/paper-fab/paper-fab.js';
import '@polymer/paper-dialog/paper-dialog.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu-light.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-button/paper-button.js';
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/iron-ajax/iron-ajax.js';
import '@polymer/app-storage/app-localstorage/app-localstorage-document.js';

// Components locais
import '../elements/collection-coin-element.js';



class ConversionTodayConverter extends connect(store)(PolymerElement) {
    static get template() {
        return html`
        <style include="demo-pages-shared-styles">
            :host {
                display: block;
                padding: 10px;
            }

            paper-fab {
                --paper-fab-background: #2B4461;
                display: inline-block;
                /* margin: 8px; */
                position: fixed;
                right: 25px;
                bottom: 30px;
            }
        </style>


        <app-localstorage-document key="conversion-today-coins" data="{{coins}}">
        </app-localstorage-document>

Браузер - ошибка

Это то, что появляется в браузере

1 Ответ

0 голосов
/ 08 июня 2018

Прежде всего: вам следует добавить несколько примеров кода ваших элементов, поскольку решить вашу проблему без дополнительной информации нелегко ?

Когда я обновлял свои проекты до полимера 3.x, я всегда получалта консольная ошибка, когда я забыл заменить использование унаследованного класса Polymer.Например: в Полимере-2 элемент был определен как class XCustom extends Polymer.Element {...}, но в полимере-3 это class XCustom extends PolymerElement {...}.Если вы забудете изменить это в любом элементе (своем и импортированном), ваша консоль сгенерирует ошибку Polymer is not defined.

Так что, я думаю, в вашем Webapp / Element все еще есть ссылки на устаревший класс Polymer.В моем случае это было в основном из следующих случаев: Polymer.Element, Polymer.importHref(...) или Polymer.mixinBehaviors(...).Вам следует просто выполнить поиск файлов вашего проекта для использования " Polymer. " и заменить все вхождения эквивалентными функциями polymer-3.

Вот некоторые из наиболее распространенных замен обновления вpolymer-3:

Polymer.Element

Создайте элемент следующим образом: 

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class MyElement extends PolymerElement {...}

Также посмотрите на Polymerдокументы

Polymer.mixinBehaviors (...)

Использовать поведенческие миксины следующим образом: 

import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
class MyElement extends mixinBehaviors([IronResizableBehavior],PolymerElement)  {...}

Полимер.importHref (...)

Импортировать элементы следующим образом: 

import('./my-page.js').then(
   function(){
      console.info("Success");
   }.bind(this), 
   function(){
      console.info("Fail");
   }.bind(this)
);

Также взгляните на Polymer docs

...