Issue Loading PopperJS and Bootstrap via RequireJS, Even After Using Recommended PopperJS Version

Asked 1/9, 2017 at 16:2 Answered 17/3, 2021 at 1:14

Solved javascript twitter-bootstrap requirejs bootstrap-4 popper.js

I'm attempting to load jquery, popperjs, and bootstrap (v4-beta) via requirejs and in the console I keep getting:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.js:6
    at bootstrap.js:6
    at bootstrap.js:6

Here's my code in main:

requirejs.config({

  paths: {
    'jquery': 'lib/jquery',
    'popper': 'lib/popper',
    'bootstrap': 'lib/bootstrap'
  },

  shim: {
    'bootstrap': ['jquery', 'popper']
  }

});

requirejs(['jquery', 'popper', 'bootstrap'], function(jquery, popper, bootstrap) {});

This has already been asked a few times regarding issues with loading popper.js and bootstrap with requirejs. Yes, I'm using the umd version referenced here.

Everything is loading properly into the page:

<script data-main="js/main.js" src="js/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="popper" src="js/lib/popper.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="js/lib/bootstrap.js"></script>

I'm confused as to why I'm still getting this error and am starting to think it's something with my require config. Any ideas?

Prologue answered 1/9, 2017 at 16:2 Comment(5)

I use what Bootstrap gives <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/…" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> and it's loaded before my </body> tag – Yolondayon 1/9, 2017 at 16:37

also this goes in the <head> section <script src="cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/…" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/…" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> – Yolondayon 1/9, 2017 at 16:39

@Yolondayon I don't have any issues with either of those methods. My issue arises when I utilize requirejs to load everything. – Prologue 1/9, 2017 at 16:47

The requirejs build of Bootstrap beta.1 is kind of buggy, it expects Popper.js to be available in the global scope. They should fix this problem in the next release – Houdini 1/9, 2017 at 17:54

The library is popper.js, not popper – Houdini 15/9, 2017 at 10:1

Until Bootstrap PR #22888 is released, this is how I've fixed the Bootstrap dropdown require Popper.js (https://popper.js.org) issue...

Similar to what's mentioned in other blog posts the idea is to create your own module that wraps Bootstrap. This module then loads and sets popper.js in the prescribed manner before loading bootstrap:

requirejs.config({
    "paths" : {
        "jquery"        : "https://code.jquery.com/jquery-3.2.1.slim.min",
        "popper"        : "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min",
        "bootstrap"     : "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min"
        "initBootstrap" : "...wotever..."
    },
    "shim" : {
        "bootstrap" : ["jquery"]
    }
});

...

define("initBootstrap", ["popper"], function(popper) {
    // set popper as required by Bootstrap
    window.Popper = popper;
    require(["bootstrap"], function(bootstrap) {
        // do nothing - just let Bootstrap initialise itself
    });
});

Now let your code / website have a dependency on initBootstrap and not bootstrap.

Or as chasepeeler mentions, if you don't want to create a new module, you can just add a require statement:

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

Note this is also posted on the Bootstrap Popper Issue on GitHub.

Duthie answered 20/9, 2017 at 13:55 Comment(2)

The same code above works without errors for me. This looks fine with Bootstrap 4.0.0.-beta, but when try to use the latest Bootstrap v4.0.0 (only remove the '-beta') there is an error saying that popper.js is not found because it looks for it in the root of the project. When I put on the root It works, but that's not the proper way. Someone had the same issue? – Sidky 30/3, 2018 at 10:49

Yes, @Sidky it is true. 4.0.0-beta was the last version of unbundled bootstrap to work with requirejs. For solution, refer #52260589 – Alden 11/9, 2018 at 6:50

Alternatively- "bootstrap.com/contents": Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.

So I added it to my library. Changed the name ( "bootstrap.bundle.min.js" -> "bootstrap.min" ), created a path for bootstrap and a shim for jquery. Seems to have worked for me.

Ogpu answered 22/2, 2018 at 0:58 Comment(1)

just to be clear require bootstrap.bundle.js and not bootstrap.js. Thank you ogginger – Dunno 21/1, 2019 at 13:41

Until Bootstrap PR #22888 is released, this is how I've fixed the Bootstrap dropdown require Popper.js (https://popper.js.org) issue...

requirejs.config({
    "paths" : {
        "jquery"        : "https://code.jquery.com/jquery-3.2.1.slim.min",
        "popper"        : "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min",
        "bootstrap"     : "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min"
        "initBootstrap" : "...wotever..."
    },
    "shim" : {
        "bootstrap" : ["jquery"]
    }
});

...

define("initBootstrap", ["popper"], function(popper) {
    // set popper as required by Bootstrap
    window.Popper = popper;
    require(["bootstrap"], function(bootstrap) {
        // do nothing - just let Bootstrap initialise itself
    });
});

Now let your code / website have a dependency on initBootstrap and not bootstrap.

Or as chasepeeler mentions, if you don't want to create a new module, you can just add a require statement:

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

Note this is also posted on the Bootstrap Popper Issue on GitHub.

Duthie answered 20/9, 2017 at 13:55 Comment(2)

Yes, @Sidky it is true. 4.0.0-beta was the last version of unbundled bootstrap to work with requirejs. For solution, refer #52260589 – Alden 11/9, 2018 at 6:50

This works for me;

require.config({
    
    shim: {
        'bootstrap' : ["jquery"]
      },
      paths: {
        'jquery': '../jsLibrary/jquery',
        'popper': "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min",
        'bootstrap': "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min",
        'tatMusic': '../music/tatMusic'
      }
});

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

Burgeon answered 17/3, 2021 at 1:14 Comment(1)

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes – Rufus 17/3, 2021 at 5:52

Recommended topics

Hot tags