Polymer 3.0启动后自定义元素无法渲染，控制台报注册重复错误

Hey there, let's tackle this error you're facing. That DOMException means you're trying to register a custom element name that's already in the browser's CustomElementRegistry—usually because the same component (or its dependencies) are being loaded more than once. Here's how to fix it step by step:

Common Causes & Solutions #

1. Clean Up Duplicate Dependencies #

This is the most likely culprit. Your node_modules might have duplicate copies of Polymer core modules (like @polymer/polymer) or components like paper-checkbox, which causes the same element to be registered twice.

Do a fresh install to resolve this:

# Delete node_modules and lock file
rm -rf node_modules package-lock.json
# Reinstall dependencies
npm install

This ensures all dependencies are pulled in with consistent versions, no duplicates nested in subfolders.

2. Verify Consistent Import Paths #

Double-check your ES module imports to make sure you're not importing the same component from different paths. For example, avoid mixing imports like:

// Good: direct top-level import
import '@polymer/paper-checkbox/paper-checkbox.js';

// Bad: nested path that pulls in a duplicate polymer dependency
import './components/@polymer/paper-checkbox/node_modules/@polymer/polymer/lib/elements/dom-module.js';

Stick to importing directly from the top-level node_modules packages (the first example) to prevent duplicate loads.

3. Avoid Mixing HTML Imports and ES Modules #

Polymer 3 uses ES Modules instead of the old HTML Imports from Polymer 2. If you accidentally left <link rel="import"> tags in your HTML for components you're already importing via JS, that'll cause duplicate registration. Remove any leftover HTML Import links that overlap with your JS imports.

4. Check Your Custom Element Definitions #

If you're creating your own elements, make sure:

• Your element name is unique (follows the required kebab-case format, no conflicts with built-in or third-party elements)
• You only call customElements.define() once per element name in your code.

Extra Troubleshooting Tip #

If you still see the error after a fresh install, run this command to check for multiple versions of Polymer in your dependency tree:

npm ls @polymer/polymer

If you see duplicate entries, run npm dedupe to merge them into a single version.

内容的提问来源于stack exchange，提问作者Jim C