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

回答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

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

回答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

来源：https://stackoverflow.com/questions/46022976/cant-load-popper-js-with-webpack-and-laravel-mix

标签

javascript

laravel-5

Webpack

bootstrap-4