Bootstrap 4 and RequireJS
09/12/2017 3 Comments
I’ve been loading Boostrap 3 via RequireJS without issue. My app.js looked like the following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
requirejs.config({ "paths": { "jquery": "https://code.jquery.com/jquery-2.2.4", "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap" }, "shim" : { "bootstrap": ["jquery"] } }); require(["app/main"],function(app){ window.mainApp = app; }); |
However, when attempting to load Bootstrap 4, which requires Popper.js, I kept getting the following error from Bootstrap: “Bootstrap dropdown require Popper.js (https://popper.js.org)” Even though Popper.js was included before Bootstrap in my paths, and I added Popper.js as a dependency in the Bootstrap shim
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
requirejs.config({ "paths": { "jquery": "https://code.jquery.com/jquery-3.2.1", "popper": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper", "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap" }, "shim" : { "bootstrap": ["jquery","popper"] } }); require(["app/main"],function(app){ window.mainApp = app; }); |
The issue seems to be that Popper.js is never defined in the global scope. In order to get around that, I did the following, which seems to work:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
requirejs.config({ "paths": { "jquery": "https://code.jquery.com/jquery-2.2.4", "popper": "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper", "bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap" }, "shim" : { "bootstrap": ["jquery","popper"] } }); require(["popper"],function(p){ window.Popper = p; require(["app/main"],function(app){ window.mainApp = app; }); }); |
There might be a more elegant way to handle this, but my knowledge with RequireJS is limited. My application compiled (using Grunt) without issue as well. This issue is also supposed to be resolved in an upcoming Bootstrap release. So, this might only be needed temporarily.
Recent Comments