We Keep Coding

TypeError: Cannot read property '0' of undefined at v.unsubscribe

I have a window.onerror that catches uncaught errors. Those errors then get reported to me via email.
I am getting error reports with the below error:
TypeError: Cannot read property '0' of undefined
at v.unsubscribe (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:1:1), <anonymous>:49:241)
at v.eval (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:1:1), <anonymous>:47:100)
at v.publish (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:1:1), <anonymous>:48:456)
at i (eval at <anonymous> (https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js:1:1), <anonymous>:58:22)
I know what this error generally means, but I cannot find the cause of the error and searching around google / SO did not yield results. I cannot replicate the error because it's not happening to me, but it is happening to at least one user and seems to happen intermittently. My users use this application every weekday between normal work hours, and days will pass before this error gets reported to me again. It seems to happen to the same user, but I cannot be sure of this as my error reports are grouped up by UserAgent.
I have made sure that my scripts are loading in the correct order:
<script type="text/javascript" src="assets/js/errors.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.1/jquery-ui.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js" crossorigin="anonymous"></script>
</body>
Later, these other scripts are loaded:
<script src="assets/js/nimble.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/jSignature.min.js"></script>
<script type="text/javascript" src="assets/js/polyfill.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
Does anyone know how I address this error or at least debug it even further?

The reason why the error was so nebulous was because I was loading one entire page via AJAX, scripts included (I initially did this years ago before I knew better). I changed this and after a few days, I got a different error but with some of the same offending lines numbers.
/assets/js/jSignature.min.js:49:241
/assets/js/jSignature.min.js:47:111
/assets/js/jSignature.min.js:48:461
i#/assets/js/jSignature.min.js:58:29
I haven't addressed the error itself yet, but now I know what is causing the error.

Uncaught SyntaxError: Unexpected token '<' in angular 8

I am following a video on LinkedIn learning, and when I try to run my code, I get the following error: Uncaught SyntaxError: Unexpected token '<' and I have looked at the files and don't see this '<' on line 1 as the error says. This error results in a fix for a Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. where I added type="text/javascript" in front of the src. Line 1 of the first file I get the error for is /******/ (function(modules) { // webpackBootstrap and as you can see there is no < in that line. Any help is greatly appreciated.
EDIT: Here is the code in question:
<script src="runtime-es5.js" nomodule defer></script>
<script src="polyfills-es5.js" nomodule defer></script>
<script type="text/javascript" src="polyfills-es2015.js" type="module"></script>
<script type="text/javascript" src="styles-es2015.js" type="module"></script>
<script src="styles-es5.js" nomodule defer></script>
<script type="text/javascript" src="vendor-es2015.js" type="module"></script>
<script src="vendor-es5.js" nomodule defer></script>
<script type="text/javascript" src="main-es2015.js" type="module"></script>
<script src="main-es5.js" nomodule defer></script>```
any of the scripts with type="module" are the issues.

Sounds like you are making an HTTP request and it is returning the entire webpage instead of the data you are looking for because of an error in the request. So the first character in the response is < which is part of the <!DOCTYPE html> at the top of the html file that is coming back in the response. If you show us a sample of your code that is making this request I could be more specific.

Why there exist error Uncaught ReferenceError: $ is not defined if add async?

My index like this :
...
<html >
<head>
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
</head>
<body class="header-static">
<div class="page-container">
<!-- this is call header, navigaton, content, footer -->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/Content/assets/script/jquery-ui.min.js"></script>
...
<script type="text/javascript">
...
</script>
<script>
$(document).ready(function () {
...
});
</script>
</body>
</html>
If I test pages speed using gtmetrix. And gtmetrix recommendation for Defer parsing of JavaScript. So I try to add async like this :
<script src="/scripts/myapp.min.js" async></script>
<script src="/scripts/myapp-themming.min.js" async></script>
it showing following error,
Uncaught ReferenceError: $ is not defined
If I using defer, it make 3 error like this : Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
How can I solve this error?

First move the two scripts in the <body> into the <head> section at the top (above the 3 dots you have added). This is what #Nijin Koderi meant.
The important thing is making sure that jQuery is ABOVE everything else so it is loaded first.
Secondly - you can't just use async as mentioned in the other answer I gave as you will end up with a race condition.
The reason you get less errors with async is purely down to load speed of resources, you will find that with enough loads you will get different errors depending on which scripts download the fastest.
It is much easier while you are learning this to use defer (in fact I nearly always use defer unless you are loading megabytes of JS or your site needs JS within milliseconds to work)
To quote the answer I gave
The easiest way [to defer parsing of JavaScript] is to add defer
attribute to each JavaScript request.
For better performance (difficult) I would recommend using async
instead as this will start downloading sooner and activate each Script
as soon as it is available.
However this often causes issues with 'race conditions' where scripts
may load out of order (i.e. if you are using jQuery and another script
loads before it that needs jQuery you will get an error).
Try defer first and if performance is good use that.

You have two errors as mentioned above, Uncaught ReferenceError: $ is not defined, Uncaught TypeError: $(...).material_select is not a function, and Uncaught TypeError: $(...).select2 is not a function
the first problem can be resolved by adding the following js file on the top before any other js as shown below
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
...
<script src="/scripts/myapp.min.js"></script>
<script src="/scripts/myapp-themming.min.js"></script>
Next Error is for select2. For resolving this issue,add the following stylesheet and js file after jquery.min.js
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js">

Javascript error prevents loading later javascript files

Why this odd behavior?
An error in javascript inside a script tag prevented the javascript included with a 2nd script tag from working. Commenting the bad lines allowed the 2nd, included script to work.
My question is, why does it behave this way? Shouldn't a second, included script be unaffected by any kind of errors in a separate, unrelated script element?
It took me awhile to fix this, because although I saw errors in the console, they weren't in my included script and therefore seemed irrelevant.
Here is the console error:
jquery.table.addrow.js:26 Uncaught TypeError: $(...).live is not a function
at ExpandableTable.live (jquery.table.addrow.js:26)
at init.$.fn.btnAddRow.$.fn.tableAutoAddRow (jquery.table.addrow.js:299)
at HTMLDocument.<anonymous> (?c=cf&v=sis&sf=cs&n=63:28)
at fire (jquery.js:3048)
at Object.fireWith [as resolveWith] (jquery.js:3160)
at Function.ready (jquery.js:433)
at HTMLDocument.completed (jquery.js:104)
And here is the code that caused the error. After I comment the offending code in the first <script> element, the 2nd <script> element works perfectly:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" href="/includes/js/jquery-ui/jquery-ui.min.css">
<script src="/includes/js/jquery-ui/external/jquery/jquery.js"></script>
<script src="/includes/js/jquery-ui/jquery-ui.min.js"></script>
<script type='text/javascript' src='/includes/js/jquery.tablesorter.min.js'></script>
<script type='text/javascript' src='/includes/js/jquery.jeditable.mini.js'></script>
<script type='text/javascript' src='/includes/js/jquery.table.addrow.js'></script>
<script type="text/javascript">
$(document).ready(function() {
// THESE ARE THE BAD LINES
$('.appendRow').btnAddRow({rowNumColumn:'rowNumber'});
$('.delRow').btnDelRow();
});
</script>
<script type="text/javascript" src="asdf.js"></script>
Nothing inside of asdf.js works unless I comment the 2 "bad lines" in the first script. E.g.
asdf.js:
$(document).ready(function() {
alert('hahaha'); // no output. document is never ready?
});
Now if I comment the "bad lines" in script one like so:
//$('.appendRow').btnAddRow({rowNumColumn:'rowNumber'});
//$('.delRow').btnDelRow();
Then script 2 works! So I don't think the issue can be with jQuery not being loaded. Otherwise, script 2 still wouldn't work after commenting the "bad lines" in script 1.

Javascript include conflict?

I am simply trying to show 3 diagrams, nothing more. The problem I am encountering is that the whole page turns white when I include the javascript files that belongs to the diagram number 2 and 3. How can I prevent this conflict, any ideas?
Error code I receive in console:
uncaught exception: Highcharts error #16:
www.highcharts.com/errors/16
SyntaxError: expected expression, got '<'
ExhaustTemperature.js $(...).highcharts is not a function
Here is the library for diagram 1.
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
Here is the library for diagram 2 and 3.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
Then the funny part... The whole page turns white when I include these two javascript files.
<script src="diagram2.js"></script>
<script src="diagram3.js"></script>
This is what it looks like in index.html file.
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="diagram2.js"></script>
<script src="diagram3.js"></script>