Uncaught TypeError: $(…).slicknav is not a function
I’ve downloaded free html template and it works correctly when i open it without Laravel, but when i compile CSS and JS with Laravel Mix one of the JS libraries stops working. The error looks like i didn’t plug it in html, but everything is ok and other libraries work correctly. I also tried npm install slicknav
and include it in webpack.mix.js‘s autoload, rebuild after that but nothing changes.
bottom of index.blade.php:
<script src="{{mix('js/jquery-3.3.1.min.js')}}"></script>
<script src="{{mix('js/bootstrap.min.js')}}"></script>
<script src="{{mix('js/jquery.nice-select.min.js')}}"></script>
<script src="{{mix('js/jquery-ui.min.js')}}"></script>
<script src="{{mix('js/jquery.slicknav.js')}}"></script>
<script src="{{mix('js/mixitup.min.js')}}"></script>
<script src="{{mix('js/owl.carousel.min.js')}}"></script>
<script src="{{mix('js/main.js')}}"></script>
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/jquery-3.3.1.min.js', 'public/js')
.js('resources/js/bootstrap.min.js', 'public/js')
.js('resources/js/jquery.nice-select.min.js', 'public/js')
.js('resources/js/jquery-ui.min.js', 'public/js')
.js('resources/js/jquery.slicknav.js', 'public/js')
.js('resources/js/mixitup.min.js', 'public/js')
.js('resources/js/owl.carousel.min.js', 'public/js')
.js('resources/js/main.js', 'public/js')
.css('resources/css/bootstrap.min.css', 'public/css')
.css('resources/css/font-awesome.min.css', 'public/css')
.css('resources/css/elegant-icons.css', 'public/css')
.css('resources/css/nice-select.css', 'public/css')
.css('resources/css/jquery-ui.min.css', 'public/css')
.css('resources/css/owl.carousel.min.css', 'public/css')
.css('resources/css/slicknav.min.css', 'public/css')
.css('resources/css/style.css', 'public/css')
.postCss('resources/css/app.css', 'public/css')
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
mixitup: ['mixitup']
})
.sourceMaps()
The error in chrome console:
https://i.stack.imgur.com/WnHCI.png