Polymer 3中使用paper-tabs组件出现自定义元素重复定义错误

Hey there, let's tackle that frustrating error you're seeing when using Polymer's paper-tabs component. The error message you encountered:

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://localhost:8081/node_modules/@polymer/polymer/lib/legacy/polymer-fn.js:43:18) at http://localhost:8081/node_modules/@polymer/paper-tabs/node_modules/@polymer/paper-ripple/paper-ripple.js:314:1

This pops up because the Custom Elements specification only allows one registration per element name—you're accidentally triggering that registration twice, either via redundant imports or duplicate nested dependencies. Here's how to fix it:

Step 1: Clean up duplicate dependencies #

Nested dependencies often cause components like paper-ripple (which paper-tabs relies on) to be installed multiple times. Let's resolve that:

• Delete your node_modules folder and lock file first:

  rm -rf node_modules package-lock.json
  

• Reinstall your dependencies from scratch:

  npm install
  

• If the issue persists, use npm's dedupe command to merge duplicate packages:

  npm dedupe
  

Step 2: Simplify your imports #

You don't need to import both paper-tab.js and paper-tabs.js! The paper-tabs.js file already imports paper-tab.js internally. Cutting down your imports to one line eliminates duplicate registration triggers:

// Replace your two import lines with this single line
import '@polymer/paper-tabs/paper-tabs.js';

Step 3: Verify your component usage #

Double-check your HTML to make sure you're using the tabs correctly (this helps rule out accidental load issues):

<paper-tabs selected="0">
  <paper-tab>First Tab</paper-tab>
  <paper-tab>Second Tab</paper-tab>
  <paper-tab>Third Tab</paper-tab>
</paper-tabs>

Why this works #

The root problem was either your redundant imports causing paper-tab (or its dependency paper-ripple) to load and register twice, or duplicate installed packages leading to the same element being defined multiple times. By cleaning up dependencies and simplifying imports, you ensure each custom element is registered exactly once, which complies with the Custom Elements spec.

内容的提问来源于stack exchange，提问作者Ankit Maheshwari