internetarchive / internetarchive/bookreader

CustomElementRegistry.define errors due to duplicate element registration

Open
#1,496 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.