Develop Reference

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: stackoverflowuserj23jf4#mailinator.com
pass: testingStackOverflow123
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"> </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.

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.

ExtJS: Empty File Name (only .js?_dc=20181..) - 404 Error

For a long time I keep facing with this problem and unfortunately sencha forums is not helping anything about. Therefore I had to bring up here.
I'm try to developing a simple weather panel. During displaying application on localhost environment it works all good but when it goes to live version it gives this error below and whole application is not working;
GET http://www.myapp/.js?_dc=20180112155627 404 (Not Found)
fetch # (index):89
fetch # (index):99
loadSync # (index):103
load # (index):103
loadEntries # (index):95
processRequest # (index):85
loadSync # (index):85
load # (index):85
As environment we are using Jenkins and classic toolkit during release version and this is Jenkins' commands;
Started by GitLab push by nengin
+ sencha app build classic
I've used Geolocation feature for weather panel but because of this problem I thought it keep raises error so I've take it out but still application keep give this error. On sencha forums they've suggested to me
it happens because of a missing file/ required file. Use sencha app build testing to find out which file is missing. As well comment modern toolkit statements on app.json to avoid errors related with unnecessary classes.
Well.. I did all but still if I'm not disabled weather-panel item on Dashboard class and push it to repository, Jenkins takes commit and build the live version to internet. And keep gives this error above!
Below you will find some code snippets of weather-panel, what could exactly be the reason for this error? I really need some idea.
Here is whole code blocks of weather panel # http://www.text-share.com/view/b53bd4fd
Thanks in advice.
UPDATE
Through #Alexander's comment:
So I've got this WARN on console: [W] [Ext.Loader] Synchronously loading 'Ext.data.proxy.JsonP'; consider adding Ext.require('Ext.data.proxy.JsonP') above Ext.onReady bootstrap.js:867
I've used JsonP on weatherdata class and it doesn't include JsonP inside requires. Now I've added JsonP and now the WARN is gone! So will it run without empty-file error on server with compiled application?

#Alexander 's comment has been the solution;
Please open the browser console, then work with the uncompiled app like it were the compiled app, and check for any occurrences of "Synchronously loading ..., consider adding ..." warnings. Make sure to fix all these warnings, because they cause the issue.

403 error - The Caller does not have permisson

I'd like to use Google Execution Api from my chrome extension.
On the page below, there is a form to test execution api request, but when I send request, I get 403 error as response.
This person who posted this question seems to have solved his problem which is probably the same problem as mine.
Why does my apps script deployed as API executable return Permission Denied?
But, I can't solve this error. Please guide me to help me this error.
Request
This is what I input into request form.
https://developers.google.com/apps-script/execution/rest/v1/scripts/run#try-it
Response
{
"error": {
"code": 403,
"message": "The caller does not have permission",
"status": "PERMISSION_DENIED"
}
}
Project Key : MVO00WF1oNYdJ7YvOZGxXh_z7UcVTY4Um
Scopes
I use spread sheet api so, I added spread sheet scope as additional scope for OAuth 2.0.
code.gs
This is a sample function code to call.
// This function does nothing. Just a test.
function myFunction(data) {
var sheet = SpreadsheetApp.getActiveSheet();
return "success!!";
}
The script associated with project
Additional Info
I deployed my project as API executable.
I enabled execution API on developer console.
I made OAuth 2.0 Client ID on developer console.
Reference
https://developers.google.com/apps-script/guides/rest/api#limitations

is the script public or for your use only? I got this error and it resolved when I made the script public. I was doing an Android app so the answer may not apply completely.

I was having similar problems running through the quickstart documentation provided by Google. I noticed you have two items in your scope. Be careful that you add the second scope to your array. For me, I was using the node.js quickstart so line 10 looked like this:
var SCOPES = ['https://www.googleapis.com/auth/drive', 'https://www.googleapis.com/auth/spreadsheets'];
Also, as the line above this one (lines 8-9) indicates, I had to rm my previous credentials. Go to your home directory and find (the hidden) folder .credentials. for me the command was:
me#mydrive:~/.credentials $ rm script-nodejs-quickstart.json
One I did this, I re-ran my script, got authorized, and had it all working.

Your 403 error indicates that you have incorrectly or missed some configuration in authentication for your service account. Make sure the app script is associated with correct dev console project.
The script should be associated with the dev console project id that corresponds with OAuth 2.0 client ID used (this dev console project should also have "Apps Script Execution API" enabled).
To change the developer console project for an app script select the following menu item: Resources > Developer Console Project.

I had the same problem yesterday: I got the same error although I did everything correct.
I solved it by having deleted the .credentials file und rerun the code. Try it out if didn't do that before.

Including Date Range Selector for Google Analytics api implementation

I've been trying to implement the date range selector by following the demo in https://ga-dev-tools.appspot.com/embed-api/custom-components/ But, whenever I try to test my script, I get errors.
For these scripts,
/public/javascript/embed-api/date-range-selector.js"
/public/javascript/embed-api/components/date-range-selector.js"
I get a 404 error saying that the scripts are not found. Whenever I check my sources in the browser, the generated .js files are blank.
Additionally, I tried this:
https://ga-dev-tools.appspot.com/public/javascript/embed-api/components/date-range-selector.js
And I got an error saying that gapi was undefined.
How am I supposed to include this js to my project so I can implement it? I've also already disabled AdBlock if that means anything.

Random 404 from localhost

I'm running a local server in python
python -c $'import SimpleHTTPServer;\nmap = SimpleHTTPServer.SimpleHTTPRequestHandler.extensions_map;\nmap[""] = "text/plain";\nfor key, value in map.items():\n\tmap[key] = value + ";charset=UTF-8";\nSimpleHTTPServer.test();' "$port"
EDIT: This is the readable version of the command string passed to python -c, so in pseudocode the code block above could be resumed like this: python -c $'command' "$port" where
the command part is:
import SimpleHTTPServer
map = SimpleHTTPServer.SimpleHTTPRequestHandler.extensions_map
map[""] = "text/plain"
for key, value in map.items():
map[key] = value + ";charset=UTF-8"
SimpleHTTPServer.test()
and I get (seemingly) random 404 errors that prevents my js to execute correctly.
More specifically I am serving a static html page and its linked javascript files.
Chrome tells me net::ERR_ADDRESS_UNREACHABLE and sometimes net::ERR_CONNECTION_REFUSED on this script tag on the index.html page.
<script type="text/javascript" src="http://localhost:8000/lib/fonts.js"></script>
I have 3 weird behavior I don't understand:
if I inspect the terminal log where the python server is running I don't have any 404 error. In fact it says that the file was correctly served (200).
if I go to chrome's Network panel it tells me: Failed to load response data but if I 'open link on a new tab' I can actually see the file!
If I load the file http://localhost:8000/lib/fonts.js on another tab and I refresh many times I never get errors.
sometimes I don't get any 404 errors but my js does not work at all (no js errors)
So who is causing the problem? Chrome, Python or some async behavior in my js?
I suspect that the js files are not loaded in order so other js scripts could not find and use them..
EDIT2:
If I switch server, for example using the built-in php server:
php -S localhost:8000
I won't get the errors

Ok this seems was caused by two different issues:
I've got rid of any async attributes on the <script> nodes. Especially it seems that loading jquery from google with the async attributes was causing most of the problems. Most probably the order of the scripts was not preserved but I've never got any error about jquery being undefined, I was getting an error on the missing script /lib/fonts.js weird..
Even tough removing async made things more reliable, more or less once every 10 page refresh I still got errors of the type net::ERR_ADDRESS_UNREACHABLE or net::ERR_CONNECTION_REFUSED on different external resources, sometimes on a js file, sometimes on a css file. Changing the python server with the php built-in server seems removed the remaining random errors.
So php -S localhost:8000 is more reliable (in my case) than the python counterpart.
NOTE: Even tough I've solved the problem I still don't know exactly what was causing the errors so if someone else has a better answer than this he's very welcome to post. I will leave the answer unaccepted for a while.