导入聚合物元素时出现问题

Question

我正在学习如何使用Polymer。我完全按照 here的指示进行操作，但是在第3步中，添加了paper-checkbox的导入后却出现了错误：

  

错误：名称为“ iron-meta”的自定义元素已经被使用   定义。

（此错误显示在浏览器控制台中）。

此外，使用paper-checkbox的页面不会加载，并且完全为空白，而其他页面（例如“视图一”，“视图二”等）的加载效果很好。

我开始了一个全新的项目，并再次遵循了分词法，但是发生了同样的问题。是什么原因导致此问题？

以下是该页面未加载时我的意思的屏幕截图。如您所见，导航窗格和标题保留不变，但是随着页面更改而更改的内容为空白：

这里是my-new-view.js：

/* Load the PolymerElement base class and html helper function */
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

import '@polymer/paper-checkbox/paper-checkbox.js';
/* Load shared styles. All view elements use these styles */
import './shared-styles.js';

/* Extend the base PolymerElement class */
class MyNewView extends PolymerElement {
 /* Define a template for the new element */
 static get template() {
   return html`
     <style include="shared-styles">
       :host {
         display: block;

         padding: 10px;
       }
     </style>

     <div class="card">
       <div class="circle">1</div>
       <h1>New View</h1>

       <paper-checkbox>Ready to deploy!</paper-checkbox>
       <p>New view!</p>
     </div>
   `;
 }
}
/* Register the new element with the browser */
window.customElements.define('my-new-view', MyNewView)

;

Answer 1

运行npm update将解决此问题。请注意，依赖项将在.21

中升级（如package.json）

  "dependencies": {
    "@polymer/app-layout": "^3.0.0-pre.21",
    "@polymer/app-route": "^3.0.0-pre.21",
    "@polymer/iron-flex-layout": "^3.0.0-pre.21",
    "@polymer/iron-iconset-svg": "^3.0.0-pre.21",
    "@polymer/iron-media-query": "^3.0.0-pre.21",
    "@polymer/iron-pages": "^3.0.0-pre.21",
    "@polymer/iron-selector": "^3.0.0-pre.21",
    "@polymer/paper-checkbox": "^3.0.0-pre.21",
    "@polymer/paper-icon-button": "^3.0.0-pre.21",
    "@polymer/polymer": "^3.0.0",
    "@webcomponents/webcomponentsjs": "^2.0.2"
  }