CODEWITHSUNDEEP
javascripttypescriptrequirejsbootstrap-4
Hoang
Hoang

Reputation: 867

Error load popper.js in bootstrap 4 when use require.js to load

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!

enter image description here

Upvotes: 2

Views: 9381

Answers (3)

LukaszDev
LukaszDev

Reputation: 101

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) 
  : (...)

Upvotes: 1

Hendrik De Beck
Hendrik De Beck

Reputation: 21

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.

Upvotes: 2

robscodebase
robscodebase

Reputation: 66

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>

Upvotes: 5

Related Questions