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

Mike picture Mike · Sep 1, 2017 · Viewed 8k times · Source

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?

Answer

ogginger picture ogginger · Feb 22, 2018

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.