Laravel-mix: Bootstrap v4, Tether, and Mix.extract()

[ellisio]

Alright, so I've been searching through the community and can't seem to find anyone that has an answer; so I'm going to ask it here in desperation.

We are looking to extract out most of our vendor libraries and are running into issues with Bootstrap v4 and Tether.

In our bootstrap.js for the application we have the following:

window.$ = window.jQuery = require('jquery')
window.Tether = require('tether')
require('bootstrap')

Then in our webpack.mix.js we have the following:

const { mix } = require('laravel-mix');

if (process.env.NODE_ENV == 'production') {
    mix.disableNotifications();
}

mix.webpackConfig({
       devtool: 'cheap-source-map'
   })
   .js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .extract([
       'jquery',
       'vue',
       'bootstrap',
       'tether'
   ])
   .version([
       'css/app.css',
       'js/app.js'
   ]);

Now when we run yarn run dev this results in the following error when trying to load our application:

Uncaught Error: Bootstrap tooltips require Tether

If we remove bootstrap and tether from the extract() everything works again. Are we initializing Tether and Bootstrap wrong when it comes to using Extract?

Environment Information:

• Laravel Mix: 0.8.1
• Node: v7.5.0

[ellisio]

It appears removing from _bootstrap.js_:

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

Then adding to _webpack.mix.js_:

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

Resolved this issue and allows us to extract Bootstrap and Tether. Booyah!

[agentphoenix]

@ellisio I'm running into the same issue. What did your final webpack.mix.js file end up looking like? I can't seem to get things working and constantly get an error about $ not being defined as well as the tether issue with Bootstrap. Thanks!

[ellisio]

@agentphoenix This is what we ended up with:

const { mix } = require('laravel-mix');

if (process.env.NODE_ENV == 'production') {
    mix.disableNotifications();
}

mix.webpackConfig({
       devtool: 'source-map'
   })
   .autoload({
       jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
       tether: ['window.Tether', 'Tether'],
       'tether-shepherd': ['Shepherd']
   })
   .js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .extract([
       'lodash',
       'jquery',
       'jquery.payment',
       'jquery.phone',
       'tether',
       'tether-shepherd',
       'bootstrap',
       'promise',
       'moment',
       'js-cookie',
       'axios',
       'vue',
       'vuex',
       'vue-router',
       'v-tooltip',
       'laravel-echo',
       'pusher-js',
       'raven-js',
       'raven-js/plugins/vue'
   ])
   .version();

[agentphoenix]

@ellisio Thanks! Couldn't get it working without throwing some variables into my app.js file unfortunately. Not sure what I was missing.