CODEWITHSUNDEEP
javascriptnpmpolymer
vcapra1
vcapra1

Reputation: 2025

Issue importing Polymer elements

I'm learning how to use Polymer. I followed the directions exactly here, and yet on step 3 I get an error after adding the import of paper-checkbox:

Error: A custom element with name 'iron-meta' has already been defined.

(This error appears in the in-browser console).

Additionally, the page that uses the paper-checkbox doesn't load, and is completely blank, while other pages (e.g. View One, View Two, etc.) load perfectly fine.

I started a completely new project and followed the diretions again, but the same issue occurred. What could be causing this issue?

Here is a screenshot of what I mean when the page doesn't load. As you can see, the navigation pane and header remain, but the content that changes with the change of page is blank:

enter image description here

Here is 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)

;

Upvotes: 1

Views: 301

Answers (1)

Ramanathan
Ramanathan

Reputation: 166

Running npm update will fix the issue. Note that dependencies will be upgraded (as .21) in 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"
  }

Upvotes: 1

Related Questions