Search code examples
javascripthtmlweb-componentslim-js

Web Component: Dom Exception: This name has already been used

tl:dr; I don't know how to fix the error below on the site here:

You will need credentials:
un: [email protected]
pass: testingStackOverflow123

enter image description here

Details: I am trying to conditionally include a web component in a page like so:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
  if (document.querySelector('simple-fred')) {
    var script = document.createElement('script');
    script.src = 'https://embedint.crossroads.net/fred/js/simplefred.min.js';
    document.head.appendChild(script)
  }
});
</script>

Including the script conditionally instead of statically broke the code. The script above used to be loaded like this: <script src="https://embedint.crossroads.net/fred/js/simplefred.min.js"></script>, which worked

I then include the element on the page:

<simple-fred data-form-name="buildingblocksformarriage" data-redirect-url="/care/weddings/building-blocks-for-marriage/signup/confirmation">&nbsp;</simple-fred>

This works fine locally and on plunker.

To run it on plnkr, you do need to disable CORS blocking for Chrome, the command is:

TASKKILL /F /IM chrome.exe
start chrome.exe --args --disable-web-security --user-data-dir
pause

This is all good and well, but when I run this code in concert with other code, it fails. I get the following error (same error, browsers report it differently):

Chrome:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Function.value (https://embedint.crossroads.net/fred/js/simplefred.min.js:5:383105)

Mozilla:

Error: A custom element with name 'slim-repeat' has already been defined.

This error seems to be caused by two third-parties trying to create the same custom component as far as I can tell judging by this question I have a bounty on

I am at a loss at this point. The int environment that throws the error is here:

https://int.crossroads.net/care/weddings/building-blocks-for-marriage/signup

You may need a login, I made one so it's faster (can be shared):

[email protected]
testingStackOverflow123

The code is open source and is found here (I don't think looking at it will help, just for completeness): https://github.com/crdschurch/crds-fred/blob/development/CrdsFred/Views/Form/Index.cshtml

How do I fix this?

Or at least, what are possible causes? I will throw at least a 100 point bounty on this to reward the accepted answer.

Solution

  • it looks like there's a node module named slim-js, and it creates an element called slim-repeat on lines 1057 and/or 1146 of Slim.js (see screenshot). Maybe you just need to pick a different name?

    slim-repeat