\Uncaught ReferenceError: $ is not defined\ JavaScript error

I am running into an issue when trying to use some of the Pro features of MDBootstrap, specifically SideNave. I am using the default configurations as indicated in the setup for WebPack development environments, but when I try to include JavaScript at the end of my html file, I get a "Uncaught ReferenceError". This applies to both the SideNav implementation and wow.js. Here is how I am initializing both at the bottom of my html:

<script type="text/javascript">
new WOW().init();

$(".button-collapse").sideNav();

varsideNavScrollbar = document.querySelector('.custom-scrollbar');

Ps.initialize(sideNavScrollbar);

</script>

I get an Uncaught ReferenceErrors for both wow.js and sideNav. Any ideas? I verfied that app.js was being defined as an entry point in my webpack.config.js file, and that app.js imports the "../vendors/mdb/js.mdb" file, which subsequently has the references to wow.js and sideNav. WebPack runs without errors, builds the project, and runs it via the WebPack Dev Server. The page loads with the correct styles and components. I only fins the errors when debugging the JavaScript in the browser (Chrome). The SideNav components also do load correctly, so the navbar formatting is a bit off. I think this is an issue with the WebPack config file as no JavaScript initializations seem to be working. To confirm, this is the WebPack configuration file straight off the "Getting Started" part of this site. Finally, I am using the Pro version of MDB and have verified that mdb in the vendors folder has the correct Pro version.  

---