无法使用webpack和Laravel混合加载popper.js [英] Can't load popper.js with webpack and Laravel mix

问题描述

我在项目上使用bootstrap 4 beta和Laravel 5.4，并使用npm和laravel mix加载我的js依赖项.到目前为止，除我尝试使用booostrap js方法外，其他所有方面都运转良好.它引发了错误"Bootstrap下拉列表需要Popper.js"，因此我将其下载并加载到了bootstrap.js和webpack.mix.js文件中，但它仍在请求此依赖项，您能告诉我我做错了什么吗?

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

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

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

推荐答案

我也遇到了这个问题，并通过以下方式解决了这个问题:

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

您必须安装popper.js:

You've to install the popper.js :

npm install popper.js --save

然后将其加载到resources/asset/js/bootstrap.js中的引导文件之前

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) {
    }

在webpack.mix.js中

然后:

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

这篇关于无法使用webpack和Laravel混合加载popper.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！