Order of vendor loading

I am using Bootstrap-sass (laravel). This requires jQuery. When I load the page, it keeps saying that bootstrap-sass needs jQuery, even though it has been loaded. However, jQuery comes after Bootstrap in vendor.js.

This is my mix:

mix.js('resources/assets/js/app.js', 'public/js')
   .extract(['jquery', 'vue', 'vue-cookie', 'vue-resource', 'axios', 'lodash', 'moment', 'autosize', 'bootstrap-sass'])
   .sass('resources/assets/sass/app.scss', 'public/css');

Is there a way to load jQuery first?

Also… The Vue interceptor gives a Uncaught TypeError: Cannot read property 'interceptors' of undefined error:

Vue.http.interceptors.push((request, next) => { // Here
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

Vue is being defined in the laravel bootstrap.js. Will this compile automaticly? I require it inside app.js.

[jeff-h]

Any chance mix could respect the order the vendor libraries are specified in the extract array? I don’t think this problem is going to go away — I’m using Bootstrap 4, which depends on Tether, and their order is wrong in my vendors.js.

If I could fix this by putting tether first in my extract array, it would be great!

   .extract(['tether', 'bootstrap', 'axios', 'vue'])

[nmfzone]

This isn’t an issue, It’s just because since 0.9.0 (I think), jQuery has been removed from Webpack Provided plugin. See here.

So, if you need jQuery to be autoloaded, you could place this in your webpack.mix.js.

.autoload({
    jquery: ['$', 'jQuery', 'jquery'],
})