Laravel-mix: Using extract() causes "Bootstrap tooltips require Tether" error

[moleculezz]

• Laravel Mix Version: 0.8.8
• Node Version: 7.7.3
• NPM Version: 4.1.2
• OS: OS X 10.11

Description:

Wanted to use bootstrap 4 so I swapped bootstrap-sass for bootstrap 4.0.0-alpha6. bootstrap 4 uses tether library. tether should be added to the global scope before bootstrap is added. This works fine until you want to use the extract() method to vendor the libraries.
This returns Uncaught Error: Bootstrap tooltips require Tether

Steps To Reproduce:

1. Update package.json dependency: Swap "bootstrap-sass": "^3.3.7", with "bootstrap": "^4.0.0-alpha.6",
2. In resources/assets/js/bootstrap.js change require('bootstrap-sass) with require('bootstrap)
3. Add window.Tether = require('tether'); right before require('bootstrap')
4. Make changes to resources/assets/sass/app.scss to point to bootstrap instead of boostrap-sass
5. Successs!
6. Now add .extract(['tether', 'bootstrap']) to webpack.mix.js
7. Fail!
   

[coolynx]

@moleculezz, maybe this one could help https://github.com/JeffreyWay/laravel-mix/issues/440#issuecomment-286465595

[QWp6t]

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

[adiachenko]

Or you can just separate your build into 2 chunks (e.g. bootstrap.js and app.js) and don't bother with extract. It's not like CommonsChunkPlugin was specifically designed to extract vendor libraries. There are easier ways to achieve the same considering your build complexity.

[moleculezz]

Thanks. mix.autoload worked fine.
It's strange though. It seems as if the bootstrap.js file does the same thing as mix.autoload.