If you are using Bootstrap 4 with Laravel 5.4, you may encounter a problem related to Tether.

Bootstrap 4 requires Tether. Running the default Laravel mix webpack config throws an error because the Tether module is not available as a variable in the Bootstrap module. You might get a Console error like this:

Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
    at app.f3e519c….js:14883
    at app.f3e519c….js:15484
    at Object.<anonymous> (app.f3e519c….js:15669)
    at Object.VERSION (app.f3e519c….js:15671)
    at __webpack_require__ (app.f3e519c….js:20)
    at Object.<anonymous> (app.f3e519c….js:12095)
    at Object.<anonymous> (app.f3e519c….js:12129)
    at __webpack_require__ (app.f3e519c….js:20)
    at Object.<anonymous> (app.f3e519c….js:11192)
    at __webpack_require__ (app.f3e519c….js:20)

Fortunately there’s a pretty easy fix.

Solution

Laravel mix has an autoload() method that requires modules wherever they are needed.

To fix the Tether issue, add this to webpack.mix.js:

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

This requires tether wherever either the variable Tether or window.Tether is referenced (in this case, by Bootstrap). I think Bootstrap 4 uses the latter.

References

• Laravel Mix Autoloading