Expected behavior
I add my JS files to my laravel application html code in following order:

• Header:
  1. jQuery
  2. Bootstrap
  3. mdbpro

Now i can use toastr, the sideNav, the tooltips and all the other wonderful components from mdbootstrap pro.

Actual behavior
When i add all the JS Files to the footer, the sideNav and the tooltips works fine but the toastr gives an error: ReferenceError: toastr is not defined

When i add the JS Files to the header, the sideNav gives an error: TypeError: $(...).sideNav is not a function and the tooltip don´t work and, well, actually nothing works.

Resources (screenshots, code snippets etc.)
With webpack, i implement the JS files in following order:

window.Popper = require('popper.js').default;

//It´s not running without this: (ReferenceError: $ is not defined):
window.$ = window.jQuery = require('jquery'); 

require('./../../node_modules/mdbootstrap-pro/js/bootstrap.js');
require('./../../node_modules/mdbootstrap-pro/js/mdb.js');

And the SCSS Files in this Order:

@import '~mdbootstrap-pro/css/bootstrap.min.css';
@import '~mdbootstrap-pro/scss/mdb';

I added the JS file in my HTML-Header:

<script src="{{ asset('js/app.js') }}"></script>

ReferenceError: toastr is not defined
TypeError: $(...).sideNav is not a function

Hope you have an solution. Regards