I am trying to add Bootstrap 4 to Aurelia
. I can only get the CSS
to work but the bootstrap.js
requires Tether
and I can't get it included, since I keep getting this error in the console:
Bootstrap tooltips require Tether
I tried something along this
"jquery",
"Tether",
{
"name": "tether",
"path": "../node_modules/tether/dist",
"main": "js/tether.min",
"exports": "Tether",
"resources": [
"css/tether.css"
]
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["tether", "jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
It does bundle, but it's still complaining about the missing Tether
.
I read on another stack answer that I have to makeTetheravailable globally which could be done via
requirejs.config.js` with this
define(['lib/tether.min'], function(tether) {
window.Tether = tether;
});
but there's no such config with Aurelia
.
After some more time spent on this, I believe that I came up with something working. I don't see anymore errors and I am now able to use Bootstrap tooltip
, so I will assume this is the working solution.
All the changes were made inside the aurelia.json
configuration file, as the following:
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"node_modules/tether/dist/js/tether.min.js",
"scripts/require.js"
],
"dependencies": [
...
"aurelia-templating-binding",
"jquery",
"tether",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery", "tether"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
...
So basically, I just had to add it to the prepend
to get it working. Also note that adding tether
inside the deps[]
array has no effect (probably because Tether
is now global with the prepend
), but I like to see it there as a reminder that it's a dependencies anyway.
EDIT
As mentioned by @Paul-Sebastian, it's probably better to remove tether
from showing up in the deps
of Bootstrap
to remove possibility of double inclusion. Basically this is the updated code:
"tether",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
EDIT #2
There is now also an append
section that just got added to Aurelia-CLI
to help with Legacy Library with Plugins. The section reads as the following:
A Very Stubborn Legacy Library With Plugins
Some legacy libraries may support plugins which you also want included in your bundle. In some cases these plugins depend on a global object defined by the main library, so it is important that the plugins exist later in the bundle than the main library scripts. These plugins can go in the
append
section, which works exactly the same as theprepend
section but the scripts are appended to the end of the bundle, after all other items. Like the prepend section all items are relative to the project folder, not the src.