jQuery and Bootstrap: Warning on console - Failed resource

Question

Some time ago I updated my jQuery and since then my project has stopped executing Javascript all over.

This is the script in the Index page I use to test the use of JS:

@section scripts{
 <script src="~/js/jquery-3.2.1.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script>
     console.log("hi");
 </script>

}

This is the result in the console:

What catches my eye is:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

Going in detail on that alert I see:

if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\'s JavaScript requires jQuery. 
jQuery must be included before Bootstrap\'s JavaScript.')}

Checking jQuery now:

It has a tag saying its extrange (extraño in spanish)

UPDATE

I decided to uninstall jQuery and bootstrap and reinstall them: First jQuery and then Bootstrap.

After that, Bower looks like this.

Still not working tho

Checking the Network console (as required by user) I got this:

There is a bunch of kendo ui not loading

Note: I installed kendo ui back in the day because I needed a editable grid, but since it sucked, I made my own and discarded kendo ui.

UPDATE x2

Note: I'm working on ASP.NET Core

It seems that the answer might be that jQuery must load before Bootstrap.

To check this I'm going thru diferent files (bower.json, _Layout.cshtml) since I don't usually reference the scripts in each file. My project usually has a reference in the background that load these scripts into each view automaticaly I believe.

For example, I never reference the kendo ui on the Index page, but in the Console I see that it is failing to load (because it is uninstalled) but is been called.

For this I checked the _Layout.cshtml

Here I can see my references that work for the whole project I believe and it seems the order is correct.

Hope this help to any reply! Thanks

Answer 1

Here you go with two jsfiddle example.

https://jsfiddle.net/r9tnow7L/

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

In the above fiddle, bootstrap is loading before jQuery as I specified an order in the external resources.

https://jsfiddle.net/r9tnow7L/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

In this fiddle, jQuery is loading before bootstrap, check the ordering in external resources.

Please check the browser network panel. This might help you to understand the order of the library file.