Laravel-mix: Order of vendor loading

[matthijs110]

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.

[angelside]

Jquery is loaded but somehow bootstrap can't see this. I can't figure out yet.

My temporary fix is modify webpack.config.js

module.exports.plugins.push(
    new webpack.ProvidePlugin({
        $: 'jquery',
         jQuery: 'jquery',
         jquery: 'jquery',
        "window.jQuery": "jquery",
        "window.Tether": "tether"
    })
);

[matthijs110]

jQuery is defined already inside bootstrap.js:

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

Above

require('bootstrap-sass');

The only problem is: Bootstrap is defined above the jQuery library inside vendor.js. Changing the extract([]) order doesn't change it :/

[JeffreyWay]

Fixed. I added the ProvidePlugin to our default webpack.config.js.

https://github.com/JeffreyWay/laravel-mix/commit/6e1ec3dcd4c3f4408c4ee119d70a1eb7ce6d450e

[matthijs110]

Great! Thank you very much!

[jonathanpmartins]

I came across some similar problem. It seems that when I use extract on 'vue-resource' and 'vue', 'vue-resource' loads first no matter what.
For now to solve the problem:

• or I leave everything to be compiled in the app.js file and dont extract anything, so the order of loading is respected.
• or I simple extract 'vue' and leave 'vue-resource' to be loaded on compilation of the app.js file.
  I have a bunch of vendor libraries that I like to order the load, but I dont know how.

[jonathanpmartins]

well, 12 minutes after I figure out that I can do this before the interceptor code

Vue.use(require('vue-resource'));

Tip came from laracast blog: https://laracasts.com/discuss/channels/vue/vue-resource-cannot-read-property-http-of-undefined

But the order of loading using extract method is not clear.

[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'])

[amin101]

the issue hasn't been solved yet. i need jquery to be loaded before owl.carousel but it doesn't

[renegaed]

+1 this please feature to be implemented. Thank you

[solicomo]

This issue is still there in v0.9.2.

jQuery is after Bootstrap in the vendor.js.

[kohei0302]

I solved in this way

  .extract(['lodash', 'jquery', 'bootstrap', 'axios'])
  .autoload({
    jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
  })

[gocanto]

Hey, @kohei0302 this fixed the problem for me as well. The weird thing is I did not have this in another app and still it worked.

Any thoughts about it?

[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'],
})