聚合物 3“未捕获的参考错误：聚合物未定义”

Question

我是聚合物新手，运行“polymer build”后出现以下问题，当我运行“polymer serve build / esm-bundled”时，浏览器中出现以下错误：

Uncaught ReferenceError: Polymer is not defined

我注意到，如果我禁用了 polymer.json 的包，则不会出现错误。

有人可以帮帮我吗？

我正在使用 Polymer-3 和 Redux，这个项目最初是使用 polymer-2 构建的，但我进行了转换，并且在构建之前运行时它运行良好。

这是 polymer.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>

浏览器 -- 错误

This is what appears in the browser

Answer 1

首先：您应该添加一些元素的代码示例，因为如果没有任何进一步的信息，解决您的问题并不容易?

当我将我的项目升级到 Polymer 3.x 时，当我忘记替换旧的 Polymer 类的用法时，我总是遇到控制台错误。例如：在 Polymer-2 中，一个元素由 class XCustom extends Polymer.Element {...} 定义，但在 polymer-3 中，它是 class XCustom extends PolymerElement {...}。如果您忘记在任何元素（您自己的和导入的）中更改它，您的控制台会抛出Polymer is not defined-error。

所以我猜在您的 Webapp/Element 中仍然有对旧版 Polymer-class 的引用。在我的情况下，主要是在这些用法中：Polymer.Element、Polymer.importHref(...) 或 Polymer.mixinBehaviors(...)。您应该简单地在项目文件中搜索“Polymer.”的使用情况，并将所有出现的地方替换为等效的 polymer-3-functions。

以下是polymer-3 中一些最常见的升级替换：

Polymer.Element

如下创建一个元素：

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

也可以看看Polymer docs

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)  {...}

Polymer.importHref(...)

导入元素如下：

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

也可以看看Polymer docs