internetarchive / internetarchive/bookreader
CustomElementRegistry.define errors due to duplicate element registration
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 491
- Avg merge
- 2d 15h
- Merged PRs (30d)
- 3
Description
**Description**
When embedding the BookReader on a webpage, multiple `DOMException` errors appear in the browser console. This occurs because several custom elements are being registered more than once via `customElements.define()`. The errors don't prevent the BookReader from functioning, but they clutter the console and may mask other legitimate issues during development or debugging.
The problem can be reproduced by embedding any BookReader on a page and opening the browser's developer console.
**Evidence / Screenshot (if possible)**
`DOMException: CustomElementRegistry.define: 'ia-activity-indicator' has already been defined as a custom element
DOMException: CustomElementRegistry.define: 'ia-icon-close' has already been defined as a custom element
DOMException: CustomElementRegistry.define: 'modal-template' has already been defined as a custom element
DOMException: CustomElementRegistry.define: 'modal-manager' has already been defined as a custom element
DOMException: CustomElementRegistry.define: 'iaux-in-share-panel' has already been defined as a custom element
DOMException: CustomElementRegistry.define: 'iaux-in-sort-files-button' has already been defined as a custom element
DOMException: CustomElementRegistry.define: 'iaux-in-viewable-files-panel' has already been defined as a custom element`
Stack traces point to multiple modules (modal-manager.mjs, share-panel.js, viewable-files.js, ia-book-actions, etc.) each attempting to register the same custom elements.
**Expectation**
The BookReader should load without throwing console errors. Each custom element should only be registered once, with subsequent registration attempts gracefully skipped.
**Context**
Operating system: Windows 11
Browser: Firefox 147.0.1 (also reproducible in Chrome)
BookReader version: 5.0.0-106 (per stack trace)
**Proposal & Constraints**
Wrap customElements.define() calls with an existence check before registration:
`if (!customElements.get('element-name')) {
customElements.define('element-name', ElementClass);
}`
**Stakeholders**
Unknown
Contributor guide
Assessment
This issue has not been assessed yet.