使用 require.js 加载时，在 bootstrap 4 中加载 popper.js 时出错

Question

I installed bootstrap 4, jquery, popper by npm. When I load website it show error in console about can't get file popper.js, I check again that I see one file popper.js was load by require.js and one file popper.js was noticed was not found by bootstrap. They have different path. file success have path: http://localhost:9000/Libs/popper.js/dist/umd/popper.js and file fail is http://localhost:9000/popper.js

In below picture, pic 1 show configure path of library js. Pic 2 show librarys was load success, and pic 3 notice popper.js was not load.

I don't understand why bootstrap can't recognize popper.js was loaded by requie.js.

Everyone can help me explain about problem for me. Thanks!

Answer 1

Try using:

bootstrap.bundle.js

or:

bootstrap.bundle.min.js

https://getbootstrap.com/docs/4.0/getting-started/contents/

The docs show that those two files mentioned come with popper included so you won't need to require it.

If that doesn't work search your source files for /popper.js it may be as simple as fixing a reference somewhere else.

Instead of doing this:

require(["bootstrap"], function(bootstrap) {
    // do nothing
});

Try this which loads popper first:

require(["popper"], function(popper) {
    window.Popper = pop
    require(["bootstrap"]);
});

Alternatively you can use the CDN links. Bootstrap suggests using the CDN versions before you include the compiled bootstrap.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Answer 2

Hey this is my first response on a stackoverflow question but since I have been struggling with it myself, I wanted to share my answer. Just like other answers say, bootstrap requires the popper js but it references popper itself on the root so it doesn't matter if you load it or not, bootstrap looks for it on the root while you have it on a deeper directory. Look at the code below and you can see it uses require('popper.js'):

bootstrap.js

The solution is to use require to define module "popper.js" and exactly as this name like below:

require.config({
baseUrl: 'lib',
paths: {
    main: 'main',
    jquery: 'jquery/dist/jquery',
    'jquery-slim': 'jquery/dist/jquery-3.3.1.slim.min',
    'jqueryUnobtrusive': 'jquery-validation-unobtrusive/jquery.validate.unobtrusive',
    'bootstrap': 'bootstrap/dist/js/bootstrap',
    'knockout': 'knockout/knockout-latest',
    'ajax': 'jquery-ajax/jquery.unobtrusive-ajax',
    'shop': '/scripts/shop/shop',
    'domready': 'requirejs/domready',
    'shoporder': '/scripts/shoporder/shoporder',
    'popper': 'popper.js/dist/umd/popper'
}});

define("popper.js", ['popper'], () => {
require(['popper'], () => {
    require(['bootstrap']);
});

define(['main', 'jquery', 'jquery-slim'], () => {
 require(['jqueryUnobtrusive', 'ajax']);
 require(['knockout']);
 require(['jquery']);
 require(['popper.js']);
});

This way bootstrap looks for the correct directory.

Answer 3

Bootstrap requires Popper to be available in the global scope, you can solve the issue by adding exports to the shim configuration:

shim: {
    bootstrap: {
        deps: ['jquery','popper']
    },
    popper: {
        exports: "Popper"
    }
}

Also you need to make sure that bootstrap defines the name of the module correctly. You can check that in the opening lines the bootstrap.js file

(function (global, factory) {   
  typeof exports === 'object' && typeof module !== 'undefined' 
  ?  factory(exports, require('jquery'), require('popper')) 
  :  typeof define === 'function' && define.amd 
  ? define(['exports', 'jquery', **'popper'**], factory) 
  : (...)