CODEWITHSUNDEEP
javascriptlaravel-5webpackbootstrap-4
ABCrafty
ABCrafty

Reputation: 278

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

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');

Upvotes: 10

Views: 15374

Answers (4)

8ctopus
8ctopus

Reputation: 3237

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');

Upvotes: 0

Savlon
Savlon

Reputation: 789

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

Upvotes: 2

asmmahmud
asmmahmud

Reputation: 5044

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

Upvotes: 8

Angga Indriya
Angga Indriya

Reputation: 21

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 :)

Upvotes: 2

Related Questions