title: Javascript loading race condition
body: <p>I have this simple web page ion which the javascript files are loading in the wrong order:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Template App!&lt;/title&gt;
    &lt;script src="/webjars/jquery/3.4.1/jquery.min.js" type="text/javascript" &gt;&lt;/script&gt;
    &lt;link rel="stylesheet" type="text/css" href="/webjars/bootstrap/4.4.1-1/css/bootstrap.min.css" &gt;
    &lt;script src="/webjars/bootstrap/4.4.1-1/js/bootstrap.min.js" type="text/javascript" &gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/api/routes"&gt;&lt;/script&gt;
    &lt;link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png"&gt;
    &lt;script src="/assets/client-fastopt.js" type="text/javascript" &gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Content Dynamically Loaded from DB!&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And I get these errors:</p>
  
  <pre><code>TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.
  ReferenceError: jQuery is not defined
  </code></pre>
  
  <p>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 <code>type="text/javascript"</code> would fix the problem (it had no effect).</p>
  
  <p>The problem is not consistent which seems like it's a race condition.</p>
  
  <p>And yes, I know that according to the standards it should load synchronously.  Something is misbehaving but I'm not sure what.</p>
  
  <hr>
  
  <p>Edit: So I checked with Google Chrome and the issue does not occur there.  It seems Firefox specific.</p>
  
  <p>Also this does not happen in production (I have a server running a prototype website) so it only fails on my local machine.</p>
  
  <p>Also, it does work on the CDN link from the comments.  </p>
  
  <p>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 <a href="https://support.mozilla.org/sl/questions/1236463" rel="nofollow noreferrer">this</a> discussion it seems firefox might be special-casing ports.</p>
  
  <hr>
  
  <p>Edit 2:
  I tested by redirecting port 80 to port 9000 and connecting to that.  Same problem occurred.</p>
  
  <p>My next guess is something with the HTTP headers (see prior link).</p>
  
  <p>Offical CDN (Works):</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Local Production (Works):</p>
  
  <pre><code>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
  </code></pre>
  
  <p>Local Development (Race Condition):</p>
  
  <pre><code>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
  </code></pre>