How to add Tether in Aurelia-CLI to use with Bootstrap 4

Question

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 viarequirejs.config.js` with this

define(['lib/tether.min'], function(tether) {
    window.Tether = tether;    
});

but there's no such config with Aurelia.

Morbid

Answer 1

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 the prepend 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.

Morbid

Well, keeping tether inside "deps" also makes aurelia-cli bundler bundle/trace those deps before bootstrap. Otherwise, this order would be random (au run output): Tracing tether... Tracing jquery... Tracing bootstrap/css/bootstrap.min... – Kurtis

Not sure to fully understand your comment, are you suggesting to remove tether from dependencies to remove random tracing? – Morbid

I actually wasn't but you're right. Prepend and deps both pull in tether but in different scopes! So you're right, it's better that we remove the deps listing to fix double inclusion of the same definitions. Am I right? – Kurtis

Tested a few possibilities and I can't get it working without Tether being in the prepend section. Also removing it from dependencies cause the bundling to fail. I got mixed up with deps and dependencies, but I get what you mean now and yes I removed it from deps and it still works, that is the only thing that I could remove out of it. Will add this in my answer, thanks – Morbid

Great! Maybe someone more knowledgeable can explain why tether needs to be added to the prepend step but until then, this will serve as a good answer. – Kurtis