Getting same error "ReferenceError: $ is not defined" when try to call MBD function.

/// header Bootstrap core CSS

href="{{ URL::to('css/app.css') }}" rel="stylesheet"

Material Design Bootstrap

href="{{ URL::to('css/mdb.css') }}" rel="stylesheet"

/// body

  <!-- SideNav slide-out button -->
  <div class="float-left">
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
  </div>

$(function () { // SideNav Button Initialization $(".button-collapse").sideNav(); // SideNav Scrollbar Initialization var sideNavScrollbar = document.querySelector('.custom-scrollbar'); var ps = new PerfectScrollbar(sideNavScrollbar); });

JQuery

type="text/javascript" src="{{ URL::to('js/jquery-3.4.1.min.js') }}"

Bootstrap tooltips

type="text/javascript" src="{{ URL::to('js/popper.min.js') }}"

Bootstrap core JavaScript

type="text/javascript" src="{{ URL::to('js/bootstrap.min.js') }}"

MDB core JavaScript

type="text/javascript" src="{{ URL::to('js/mdb.min.js') }}"

I have PRO licence. Copied complete /js folder form /node_modules/mdbootstrap-pro/js to /public/js SCSS files are compiled over webpack to /public/css Templates, bootstrap/bootstrap.js works ok. Just MBD with js functions getting error.

Thank You

---