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.

ghiscoding · Accepted Answer · 2017-02-27T16:41:01.587

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.

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...` — Paul-Sebastian Manole, Dec 07 '16 at 14:24
Not sure to fully understand your comment, are you suggesting to remove `tether` from `dependencies` to remove random tracing? — ghiscoding, Dec 07 '16 at 15:41
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? — Paul-Sebastian Manole, Dec 07 '16 at 17:24
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 — ghiscoding, Dec 08 '16 at 17:49
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. — Paul-Sebastian Manole, Dec 09 '16 at 19:20

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

1 Answers1

A Very Stubborn Legacy Library With Plugins

Linked