Search code examples
angularjstypescriptvmware-clarityclarity

Failed to execute 'define' on 'CustomElementRegistry' when using ClarityIcons

In my application I want to use ClarityIcons.add() to add a custom icon. However I get the following error:

index.js:402 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
    at Object../src/clr-icons/index.ts (http://localhost:4200/vendor.js:84958:20)
    at __webpack_require__ (http://localhost:4200/vendor.js:84586:30)
    at ./src/clr-icons/clr-icons-api.ts.Object.defineProperty.value (http://localhost:4200/vendor.js:84635:18)
    at http://localhost:4200/vendor.js:84638:10
    at webpackUniversalModuleDefinition (http://localhost:4200/vendor.js:84564:20)
    at Object../node_modules/@clr/icons/index.js (http://localhost:4200/vendor.js:84566:3)
    at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
    at Module../src/app/core/components/core/core.component.ts (http://localhost:4200/main.js:1528:68)
    at __webpack_require__ (http://localhost:4200/runtime.js:84:30)
    at Module../src/app/app.module.ts (http://localhost:4200/main.js:618:94)

I tried reproducing it in a stackblitz but there it worked fine. In other questions I read about deleting the package-lock.json and then reinstalling node modules. I tried this but I still have the same result. Any idea where the error could be?

Solution

  • It looks like you are somehow including Clarity Icons twice in your app. Typically, this can happen if you include the pre-compiled clr-icons.min.js and also bundle the icons library as part of your own JS bundle.

    Since you call ClarityIcons.add(), I'm guessing you import { ClarityIcons } from "@clr/icons";. If you do this, you want to remove clr-icons.min.js from your index.html and follow the "Load Clarity Icons API and icon sets in Typescript" section in the documentation: https://vmware.github.io/clarity/icons/clarity-icons