requirejs加载bootstrap报错处理:Bootstrap dropdown require Popper.js (https://popper.js.org)

时间:2022-03-02 11:25:07

项目里使用RequireJS加载Bootstrap,在requirejs.config配置如下:

requirejs.config({
  "paths": {
    "jquery": "libs/jquery/jquery-3.2.1.min",
    "popper": "libs/popper/1.11.0/umd/popper.min",
    "bootstrap": "libs/bootstrap/4.0.0-beta/js/bootstrap.min"
  },
  "shim" : {
    "bootstrap": ["jquery","popper"]
  }
});
 
require(["jquery","bootstrap"],function() {
    var startName = $("script[data-start]").attr("data-start");
    if (startName) {
        require([startName]);
    }
});

在浏览器控制台输出错误:

Bootstrap dropdown require Popper.js (https://popper.js.org)

解决方法

原因使用在Window没有注入Popper。

修改require,预先加载popper,向window添加Popper对象:

require(["popper"], function (p) {
    window.Popper = p;
    require(["jquery","bootstrap"],function() {
        var startName = $("script[data-start]").attr("data-start");
        if (startName) {
            require([startName]);
        }
    });
});

参考:https://github.com/twbs/bootstrap/issues/23381#issuecomment-330850892