Laravel-mix: Bootstrap's JavaScript requires jQuery with bootstrap build

Created on 19 May 2017 · 12Comments · Source: JeffreyWay/laravel-mix

const { mix } = require('laravel-mix');
mix.js([
'public/admin/js/jquery.js',
'public/admin/js/bootstrap.min.js',
],'production/js/final.js');

But when i include final.js i got the following error

Uncaught Error: Bootstrap's JavaScript requires jQuery

I've installed the jquery with npm install jquery --save but still i got above error

Source

Shamoncushbu

Most helpful comment

For all the future googlers, I solved the problem with

mix.autoload({
    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});

EDIT: Add this before all your calls to mix.js() and mix.scss() etc.

ProExpertProg on 3 Aug 2017

👍24 🎉5

All 12 comments

In app.js add

window.$ = window.jQuery = require('jquery')

ruchern-chong on 19 May 2017

👍10

@Shamoncushbu I had this problem before. The problem solved just by using scripts instead of js for vanilla JS "as mentioned in docs"

enghelewa on 30 Jun 2017

👍3 ❤1

For all the future googlers, I solved the problem with

mix.autoload({
    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});

EDIT: Add this before all your calls to mix.js() and mix.scss() etc.

ProExpertProg on 3 Aug 2017

👍24 🎉5

@ProExpertProg
It works! Thank you!!!

ikskoder on 3 Aug 2017

This solution worked for me:

mix.autoload({
    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});

thought I would like to know why the following one did not.

window.$ = window.jQuery = require('jquery')

Thanks.

gocanto on 23 Sep 2017

👍2

@gocanto because bootstrap is loaded separately (in another closure) and jQuery has to be injected by webpack. mix.autoload(....) tells mix where does jQuery need to be injected, so whenever webpack finds $ or window.$ etc., it will inject jQuery.

ProExpertProg on 23 Sep 2017

👍1

Oh ok. Thanks a lot

gocanto on 23 Sep 2017

@ProExpertProg In what file did you add your mix.autoload? I'm using a creat-react-app and getting the same error as the trend here.