Exception DOMException non interceptée: échec de l'exécution de 'define' sur 'CustomElementRegistry': ce nom a déjà été utilisé avec ce registre à http://127.0.0.1 : 8000/components/@polymer/polymer/lib/elements/dom-module.js: 175: 16
La suppression des modules de nœuds et du verrouillage du package et la réinstallation n'ont pas fonctionné.
3 Réponses :
Dans les cas où il s'agit d'un élément personnalisé que vous enregistrez, vérifiez simplement qu'un élément portant ce nom n'a pas déjà été enregistré. Évidemment, vous pouvez inclure une logique plus complexe pour faire varier le nom, décorer la classe, etc., mais cela vérifie simplement si quelque chose est déjà enregistré en utilisant l'API existante et sinon, enregistre la chose donnée (dans mon style - le vôtre peut varier , ceci montre simplement comment éviter généralement l'erreur):
customElements.get('the-element') || customElements.define('the-element', HTMLTheElement);
Pour plus d'informations sur l'API, consultez https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry
Bravo car c'est la meilleure façon que j'ai vue de le faire. Si cela est nécessaire, pourquoi des bibliothèques comme Polymer n'en ont-elles pas? J'essaie d'éviter ce code supplémentaire pour CHAQUE composant
Thx @JGleason Polymer Je pense que c'est la fin de la vie à la v3. Je ne suis pas sûr de ce que fait LitElement (afaik le successeur de Polymer), mais il semble simple de résumer avec une solution de bricolage - en utilisant une classe de base pour étendre tous les composants internes, probablement lui-même une extension d'une chose existante comme LitElement. Cela faciliterait la maintenance à long terme alors que nous parcourons les cycles de vie des logiciels à long terme.
Je le fais sans polymère ni éclairé. Je recherche davantage la manière standard de gérer cela avec uniquement des composants Web spécifiques
Eh bien, cela a fonctionné pour moi, sans avertissements Typescript,
if (!customElements.get('the-element')) { customElements.define('the-element', HTMLTheElement); }
J'espère que quelqu'un trouvera cela utile.
Bravo.
Fonctionne très bien. À votre santé
@ItaiRoded Cheers :)
Il n'est pas judicieux d'utiliser les réponses ci-dessus. Vous voulez que cela échoue! La raison en est que votre NPM doit dédupliquer les packages en double, donc le fait que vous voyiez un certain composant défini sur le registre des éléments personnalisés plus d'une fois est une erreur cruciale dont vous devez déboguer pourquoi le même composant est enregistré plus d'une fois .
Comment déboguer, en bref, accédez à votre navigateur, inspectez l'élément, l'onglet réseau, actualisez, déterminez quels fichiers enregistrent tous les deux le même élément. Vérifiez ensuite l'initiateur pour voir quels fichiers chargent ces fichiers. Vous obtenez ainsi une bien meilleure idée de la raison pour laquelle votre application ne résout pas la même importation à un seul endroit (votre dépendance dédoublée).
Une des raisons pour lesquelles vous pourriez rencontrer ce problème est due à semver. Si vous disposez de plusieurs versions principales différentes de la même dépendance, NPM ne peut pas simplement dédupliquer toutes les installations sur vos node_modules racine. La façon dont vous résolvez ce problème dépend de vous. Certaines personnes utilisent des alias npm pour leurs différentes majeures d'une dépendance, certaines personnes implémentent un plugin dans leur outil de construction pour résoudre les chemins vers une seule installation, etc.
Bon point, mais j'utilise ce qui précède lors du développement et du rechargement à chaud, où le navigateur a déjà l'élément enregistré mais le code autour de customElement.define a changé,
Vous ne comprenez pas qu'il est possible de rappeler dans certains cas une importation. De plus, vous répondez à une question qui n'est pas posée. Bien qu'il soit utile de noter comment éviter ces cas de double importation, c'est un commentaire sur le problème et non une réponse.
Si je me souviens bien, j'ai eu une erreur similaire lorsque j'ai inclus le même élément plusieurs fois en utilisant (au moins) deux chemins différents (même si les chemins relatifs se sont résolus aux mêmes chemins absolus). Vous pouvez donc vérifier si vous utilisez la même convention lorsque vous importez des éléments.
J'ai eu un problème lors de l'importation de fichiers. l'erreur est résolue maintenant. Merci