Question

我在我的项目中使用bootstrap 4 beta和Laravel 5.4并使用npm和laravel mix加载我的js依赖项。到目前为止，除了我尝试使用booostrap js方法之外，一切都很好。它引发了我的错误＆＃34; Bootstrap下拉需要Popper.js＆＃34;，所以我下载并将其加载到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');

Answer 1

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

您已安装popper.js：

npm install popper.js --save

在resources / asset / js / bootstrap.js中的bootstrap文件之前加载

    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

Answer 2

我有同样的问题，但现在已经完成了

我只是在resources / asset / js / bootstrap.js

中编辑这一行

＆＃13;

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

＆＃13;

您还可以阅读完整指南here

希望它也可以帮助你解决问题：）

Answer 3

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

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

无法使用webpack和Laravel mix加载popper.js

3 个答案: