无法使用 webpack 和 Laravel 混合加载 popper.js答案

【问题标题】：Can't load popper.js with webpack and Laravel mix无法使用 webpack 和 Laravel 混合加载 popper.js
【发布时间】：2018-02-11 20:39:45
【问题描述】：

我在我的项目中使用 bootstrap 4 beta 和 Laravel 5.4，并使用 npm 和 laravel mix 加载我的 js 依赖项。到目前为止，一切都运行良好，除非我尝试使用 booostrap js 方法。它向我抛出错误“Bootstrap 下拉菜单需要 Popper.js”，所以我下载并将其加载到 bootstrap.js 和 webpack.mix.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

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

【问题讨论】：

标签： javascript laravel-5 webpack bootstrap-4

【解决方案1】：

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

你必须安装 popper.js ：

npm install popper.js --save

并且在资源/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 中：

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

有几种解决方法。你可以去这里了解更多详情：

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

【讨论】：

工作完美，应标记为正确答案

【解决方案2】：

我有同样的问题，但现在已经解决了

我只是在 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) {}

您也可以阅读完整指南here

希望它对您的问题也有帮助:)

【讨论】：

这应该是公认的答案，效果很好。

【解决方案3】：

在尝试解决此问题的两个答案后，我仍然收到相同的错误。为我解决了以下问题

适用于 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

【讨论】：