Intermittent ReferenceError: $ is undefined

Question

Adding a background color to the nav on scroll, and it will randomly not work. I would say 50% of the time it works, 50% I get the ReferenceError. This is multiple devices, and multiple browsers, multiple pages.

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
            $(document).ready(function() {
              $(document).scroll(function () {
                var $nav = $(".masthead");
                $nav.toggleClass('navBG', $(this).scrollTop() > $nav.height());
              });
            });
</script>

.masthead{width:100%;height:80px;position:fixed;top:0;left:0;z-index:9999;box-shadow: 0 50px 50px -20px rgba(0, 0, 0, 0.2) inset;}
.masthead.navBG{box-shadow:0 5px 30px 5px rgba(0, 0, 0, 0.4);background-color:#01417E; !important;transition:background-color 100ms linear;}

<div class="masthead">
      
      <nav id="sidenavContainer" class="sidenav">
                <!-- SOME LIs -->
                <!-- JS for Nav Functionality -->
      </nav>
        
      <div id="navTri" onclick="openNav()"><img src="menu.svg" alt="Menu" width="30"></div>
      
      <div id="logoMain"><a href="#"><img src="logo.svg" alt="Logo"></a></div>
      
</div>

Error seems to show up consistently in the code snippet. Any thoughts?

In the snippet at least, jQuery isn't imported anywhere. As for why it's happening to you, maybe check [this thread](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined?rq=1). — Calvin Godfrey, Jan 10 '19 at 13:14
Possible duplicate of https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined?rq=1 — Mirakurun, Jan 10 '19 at 13:17
Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Brian Tompsett - 汤莱恩, Jan 10 '19 at 13:19
Sounds like 50% of the time your jQuery file does not load. Also why are you listening to scroll on the document? — epascarello, Jan 10 '19 at 13:22

score 0 · Accepted Answer · answered Jan 11 '19 at 12:23

Don't use async, remove it.

https://www.w3schools.com/tags/att_script_async.asp

Maybe try defer attribute if you want.

scripts marked async are executed in casual order, when they become available. Scripts marked defer are executed (after parsing completes) in the order which they are defined in the markup.

But then, defer your script as well, as order matters, and you don't want your script to execute before jquery loads, which is what happens sometimes with async in your case.

Makes sense and that seems to have fixed it. Unfortunately I can't remember why I had that there. Hoping I didn't need it for something else. Thanks! — matrix, Jan 11 '19 at 13:15

Intermittent ReferenceError: $ is undefined

1 Answers1