Can't load popper.js with webpack and Laravel mix

Question

I'm using bootstrap 4 beta and Laravel 5.4 on my project and loading my js dependencies with npm and laravel mix. So far everything has been working great, except when i'm trying to use the booostrap js methods. It throws me the error "Bootstrap dropdown require Popper.js", so i downloaded and loaded it in the bootstrap.js and webpack.mix.js files, but it still is asking for this dependency, can you tell me what i did wrong ?

boostrap.js

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

  require('popper.js');
  require('datatables.net');
  require('datatables.net-autofill');
  require('datatables.net-buttons');
  require('bootstrap');
} catch (e) {
  console.log(e);
}

webpack.mix.js

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

mix.js([
  'resources/assets/js/app.js',
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/popper.js/dist/umd/popper.js',
  'node_modules/bootstrap/dist/js/bootstrap.js',
  'node_modules/datatables.net/js/jquery.dataTables.js',
  'node_modules/datatables.net-buttons/js/dataTables.buttons.js',
  'node_modules/datatables.net-autofill/js/dataTables.autoFill.js',
], 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');

Answer 1

I was also facing this issue and I fixed this by:

You've to install the popper.js :

npm install popper.js --save

And loading it before bootstrap file in resources/asset/js/bootstrap.js

    try {
        window.$ = window.jQuery = require('jquery');
        window.Popper = require('popper.js/dist/umd/popper.js').default;
        require('bootstrap');
    } catch (e) {
    }

And in the webpack.mix.js:

   mix.autoload({
    'jquery': ['$', 'window.jQuery', "jQuery", "window.$", "jquery", "window.jquery"],
    'popper.js/dist/umd/popper.js': ['Popper', 'window.Popper']
});

There are several ways of solving it. You can go here for more details:

https://github.com/FezVrasta/popper.js/issues/287

Answer 2

I have same issue but it's done right now

I just edit this line in resources/asset/js/bootstrap.js

window._ = require('lodash');

// new line #1
import Popper from 'popper.js/dist/umd/popper.js';

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');
    
    // new line #2 and #3
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {}

You can also read to the full guide here

Hopefully it'll help your issue too :)

Answer 3

After trying both answers for this issue, I was still receiving the same error. What resolved it for me was the following

Works for Laravel 5.8

bootstrap.js

window._ = require('lodash');
import Popper from 'popper.js/dist/umd/popper.js'; ///<------ add this line

try {
    window.Popper = Popper; //<------ add this line
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').sourceMaps(); //<------ add this line and remove any other lines for mix.js

Answer 4

Yet another solution for laravel 9.x and laravel-mix 6.x

npm install --save-dev bootstrap@^4

app.js

window.Popper = require('popper.js');
window.bootstrap = require('bootstrap');