web-dev-qa-db-fra.com

Polymer 3.0: exception DOM non capturée lors de l'utilisation de Paper-Input

Lors de l'utilisation de paper-input, l'importation lève l'exception suivante 

DOMException Uncaught: Echec de l'exécution de 'define' sur 'CustomElementRegistry': ce nom a déjà été utilisé avec ce registre.

Je n'ai rien fait d'autre que créer le modèle pour 3.0 et ajouter l'importation.

Il semble y avoir un problème avec Outil de migration , utilisé par Google pour mettre à jour leurs anciens composants.

Est-ce que quelqu'un a déjà réglé ça?

polymerpolymer-3.x
7
Ignacio Nacho Parravicini

UPDATELe problème est dû à deux versions différentes de iron-meta dans node_modules: une version plus ancienne dans ./node_modules/@polymer/iron-meta sous 3.0.0-pre.18 (déjà installée avec Polymer Starter Kit) et une version plus récente (3.0.0-pre.19) comme dépendance. du @polymer/paper-input nouvellement installé.

Le correctif a récemment été documenté dans le Polymer Blog - i.e., supprimez package-lock.json et réinstallez node_modules:

rm -rf node_modules package-lock.json
npm install

La trace de la pile de l'erreur (ci-dessous) semble indiquer que iron-meta est en train d'être enregistré deux fois:

polymer-fn.js:43 Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Polymer (http://127.0.0.1:8081/node_modules/@polymer/polymer/lib/legacy/polymer-fn.js:43:18)
    at http://127.0.0.1:8081/node_modules/@polymer/iron-input/node_modules/@polymer/iron-meta/iron-meta.js:131:1

Une solution consiste à appliquer un correctif à customElements.define à exécuter uniquement si l'élément n'est pas déjà défini:

const _customElementsDefine = window.customElements.define;
window.customElements.define = function(name, clazz, config) {
  if (!customElements.get(name)) {
    _customElementsDefine.call(window.customElements, name, clazz, config);
  }
};

Exécutez cette avant importation de toute définition d'élément. J'ai confirmé que cela fonctionnait pour la dernière version de paper-input sur macOS High Sierra, Chrome 66.

Liaison du problème que vous avez créé pour référence: PolymerElements/paper-input Issue # 652

13
tony19

La solution se trouve sur le site Web Polymer https://www.polymer-project.org/blog/2018-05-25-polymer-elements-3-faq

  1. Supprimez fondamentalement node_modules et package-lock.json
  2. Puis réinstallez, c’est-à-dire npm install

Cela devrait fonctionner alors.

1
Vikram Rawat

Nous avons un moyen de contourner ce type de problèmes. Il s'avère que le polymère 3 n'aime pas s'emboîter dans node_modules. L'astuce consiste à supprimer manuellement les emboîtements de modules qui se plaignent.

Ce numéro sur github contre polymer met en évidence une solution scriptée.

0
Matt

comme suit le didacticiel ajouter un élément polymère , lors de l'importation de paper-checkbox.js, J'ai la même erreur. Ma solution consiste simplement à modifier le fichier.

paper-checkbox.js

modifier la ligne 

import '@polymer/polymer/polymer-legacy.js';

à

import '../../@polymer/polymer/polymer-legacy.js';

N'oubliez pas d'importer toujours le même module depuis un endroit.

0
布日古德