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

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

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
  if (document.querySelector('simple-fred')) {
    var script = document.createElement('script');
    script.src = '.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=".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 mand 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 (.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 ponent 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:

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 pleteness): .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.

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

Details: I am trying to conditionally include a web ponent 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/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/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 mand 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/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 ponent 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/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 pleteness): https://github./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.

• javascript
• html
• web-ponent
• slim-js

2 Answers 2

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?

I am the author of this library and would like to assist. I will deploy a hot fix for this Issue. Eventually not running the whole script if another instance of Slim is already initialized.