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?
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 loadingbootstrap
:Now let your code / website have a dependency on
initBootstrap
and notbootstrap
.Or as chasepeeler mentions, if you don't want to create a new module, you can just add a require statement:
Note this is also posted on the Bootstrap Popper Issue on GitHub.