I have this simple web page ion which the javascript files are loading in the wrong order:
<!DOCTYPE html>
<html>
<head>
<title>Template App!</title>
<script src="/webjars/jquery/3.4.1/jquery.min.js" type="text/javascript" ></script>
<link rel="stylesheet" type="text/css" href="/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css" >
<script src="/webjars/bootstrap/4.4.1-1/js/bootstrap.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="/api/routes"></script>
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
<script src="/assets/client-fastopt.js" type="text/javascript" ></script>
</head>
<body>
<h1>Content Dynamically Loaded from DB!</h1>
</body>
</html>
And I get these errors:
TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
ReferenceError: jQuery is not defined
I have already made sure that jquery is the first import included (as you can see) and found another answer somewhere that said that adding type="text/javascript" would fix the problem (it had no effect).
The problem is not consistent which seems like it's a race condition.
And yes, I know that according to the standards it should load synchronously. Something is misbehaving but I'm not sure what.
Edit: So I checked with Google Chrome and the issue does not occur there. It seems Firefox specific.
Also this does not happen in production (I have a server running a prototype website) so it only fails on my local machine.
Also, it does work on the CDN link from the comments.
I'm beginning to think Firefox is treating the development system differently from production. Specifically, my development environment uses port 9000 instead of 443. I'm going to put a redirect in to see what happens, but from this discussion it seems firefox might be special-casing ports.
Edit 2: I tested by redirecting port 80 to port 9000 and connecting to that. Same problem occurred.
My next guess is something with the HTTP headers (see prior link).
Offical CDN (Works):
Request:
Host: code.jquery.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:9000/
DNT: 1
Connection: keep-alive
Cookie: cf_clearance=a78075ea1c5a32fa8dca44f7b71a76f5a655f785-1586627258-0-250
Pragma: no-cache
Cache-Control: no-cache
Response:
HTTP/1.1 200 OK
Date: Sat, 11 Apr 2020 22:45:50 GMT
Connection: Keep-Alive
Accept-Ranges: bytes
Content-Encoding: gzip
Content-Length: 30638
Content-Type: application/javascript; charset=utf-8
Last-Modified: Wed, 01 May 2019 21:14:27 GMT
Server: nginx
ETag: W/"5cca0c33-15851"
Cache-Control: max-age=315360000
Cache-Control: public
Access-Control-Allow-Origin: *
Vary: Accept-Encoding
X-HW: 1586645150.dop016.fr8.shc,1586645150.dop016.fr8.t,1586645150.cds159.fr8.c
Local Production (Works):
Request:
Host: my.server.com
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://my.server.com/
DNT: 1
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Response:
HTTP/1.1 200 OK
Date: Sat, 11 Apr 2020 23:03:27 GMT
Server: Apache/2.4.25 (Debian)
ETag: "2dd180233bcfa564aa7f079a2a03f7d019d589bf-gzip"
Accept-Ranges: bytes
Cache-Control: public, max-age=3600
Last-Modified: Sun, 05 May 2019 15:29:52 GMT
Referrer-Policy: origin-when-cross-origin, strict-origin-when-cross-origin
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Permitted-Cross-Domain-Policies: master-only
Content-Type: application/javascript; charset=UTF-8
Vary: Accept-Encoding
Content-Encoding: gzip
Keep-Alive: timeout=5, max=82
Connection: Keep-Alive
Transfer-Encoding: chunked
Local Development (Race Condition):
Request:
Host: localhost:9000
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost:9000/
DNT: 1
Connection: keep-alive
Cookie: org.cups.sid=06f22708ed9d548a97575306c76e8ca3; PLAY_SESSION=eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjp7ImNzcmZUb2tlbiI6IjUzOWY2MzE2NzE5ZGY2MDBlMzY3NmE5ZjJiZTQyZmQyNmFiZGYxY2ItMTU4NjYyODc5MTAwNC1kMDI4YmU0ZDM1NmI0OTRhMzhkOGFlZjcifSwibmJmIjoxNTg2NjI4NzkxLCJpYXQiOjE1ODY2Mjg3OTF9.LKhzjKS2RZAjBuXCSbpgn0ADJasejEMfBCpBzyQX7wM
Pragma: no-cache
Cache-Control: no-cache
Response:
HTTP/1.1 200 OK
ETag: "137e612d567f365cd470db586615dd5294920d30"
Accept-Ranges: bytes
Cache-Control: no-cache
Last-Modified: Sun, 05 May 2019 17:29:52 GMT
Referrer-Policy: origin-when-cross-origin, strict-origin-when-cross-origin
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
X-Permitted-Cross-Domain-Policies: master-only
Date: Sat, 11 Apr 2020 22:45:49 GMT
Content-Type: application/javascript; charset=UTF-8
Content-Length: 88145