\Uncaught ReferenceError: $ is not defined\ JavaScript error


Topic: \"Uncaught ReferenceError: $ is not defined\" JavaScript error when using MDBootstrap WebPack Development Environment

Chris Smith pro asked 4 years ago

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.
Thanks!
 

Jakub Mandra staff premium answered 4 years ago

Hello,   Do you load JQuery before initialization?

Chris Smith pro commented 4 years ago

Hi Jakub, I am using WebPack, so I am not importing it within the html itself, but as part of the WebPack configuration file. Here is the portion of the plugin code from my WebPack Configuration file: new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.$': 'jquery', 'window.jQuery': 'jquery', Waves: 'node-waves', }),

Jakub Mandra staff premium answered 4 years ago

It is a hard problem, we did some investigation and come out with idea to upgrade webpack, babel and other dependencies to the newer version hoping this should help. But still working on it.
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: Desktop
  • Browser: Chrome
  • OS: macOS
  • Provided sample code: No
  • Provided link: No