3

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

You will need credentials:
un: stackoverflowuserj23jf4@mailinator.com
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):

stackoverflowuserj23jf4@mailinator.com
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.

VSO
  • 8,950
  • 19
  • 69
  • 148

2 Answers2

4

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

LShapz
  • 1,553
  • 9
  • 18
  • This was a pain to solve, but you hit the nail on the head with the core of the issue. I owe you 100 points bounty in 2 days, remind me if I forget. – VSO Apr 25 '18 at 20:53
  • If they are using `` then you need to use a different name. If you need to use `` then be aware that it may not do what the rest of slim is expecting. – Intervalia Apr 25 '18 at 20:53
  • @Intervalia I understand all that. The code that creates slim-repeat comes from the `slim.js` library, which is pulled in twice by different web-components. I wanted to avoid forking `slim.js` because that's not maintainable and a bad practice. – VSO Apr 25 '18 at 20:59
  • @VSO Were you able to get around it? – Intervalia Apr 25 '18 at 21:02
  • 1
    @Intervalia Yea, I forked `slim.js` and told it not to create the element if it already exists: ` if(!customElements.get(tagName)){customElements.define(tagName, class); }` This is a hack. Code will need to be refactored. Different teams both pulled in `slim.js` independently. Their work will need to be consolidated or made to share the instance. – VSO Apr 25 '18 at 21:04
4

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.

eavichay
  • 499
  • 2
  • 6
  • Sounds good, see my comment above for what fixed it. Seems to be working well, went through all of the client's automation and manual testers. Let me know if you have any questions or if you fix it. – VSO Apr 26 '18 at 20:18
  • Thanks, I will pull it in and let you know if there are any problems with it. – VSO Apr 29 '18 at 15:31
  • Thanks. You can use the gitter channel for any question you may have. – eavichay Apr 30 '18 at 14:18