Question

我是聚合物新手，运行＆＃34;聚合物构建后出现以下问题＆＃34;当我运行＆＃34;聚合物服务构建/ esm-bundled＆＃34;浏览器中出现以下错误：

未捕获的ReferenceError：未定义聚合物

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

有人能帮助我吗？

我使用的是Polymer-3和Redux，这个项目最初是用聚合物-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

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

当我将项目升级到聚合物3.x时，当我忘记替换遗留Polymer类的用法时，我总是遇到控制台错误。例如：在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(...)。您应该简单地搜索项目文件以使用＆＃34; 聚合物。＆＃34;并用等效的聚合物-3功能替换所有事件。

以下是聚合物-3中最常见的升级替代品：

<强> Polymer.Element

按如下方式创建一个元素：

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

另请查看Polymer docs

<强> Polymer.mixinBehaviors（...）

使用行为mixins如下：

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

聚合物3＆＃34;未捕获的ReferenceError：未定义聚合物＆＃34;

1 个答案: