Struggling to set up Bootstrap 4 beta in an Aurelia CLI app (v0.31.1) with requirejs and TypeScript. Despite trying different configurations, the console consistently shows this error:
Uncaught Error: Bootstrap dropdown require Popper.js
Here's a breakdown of the steps taken. First, install the necessary packages:
$ npm install --save jquery <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbafb5abb5abb6f9feeffa">[email protected]</a> popper.js
Then, adjust aurelia.json:
"jquery",
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper"
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery",
"popper.js"
],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
Key points from the configuration above:
- popper.js is declared before bootstrap
- UMD module is selected
- popper.js is listed as a dependency for bootstrap along with jquery
Lastly, in app.ts:
import 'bootstrap';
After setting up the configuration, building with au build proceeds without issues. However, when running with au run --watch, errors emerge in the console:
Uncaught Error: Bootstrap dropdown require Popper.js () (defaults.js:19)
Uncaught Error: Bootstrap dropdown require Popper.js () (bootstrap.min.js:6)
... further down:
Uncaught TypeError: plugin.load is not a function at Module. (defaults.js:19)
Unfortunately, Bootstrap 4 documentation offers guidance only for webpack setups. Searches on Aurelia's Gitter.im channel and StackOverflow fail to provide examples for Aurelia CLI with Require.js. Google results mainly cover alpha versions that used 'tethering' instead of 'popper'.
Other questions on SO with similar errors don't fit my situation:
- Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor
- Angular 4 Bootstrap dropdown require Popper.js
- And several more...
So, the question remains: how can Bootstrap 4 be configured with Popper.js in an Aurelia CLI app using Require.js, not Webpack?
Thank you.