Bootstrap 4 error "Bootstrap dropdown require Popper.js", with Aurelia CLI and Require.js

Question

I'm having trouble configuring Bootstrap 4 beta in an Aurelia CLI app (v0.31.1) with requirejs and using TypeScript. After having tried several config variations I keep on getting the following console error:

Uncaught Error: Bootstrap dropdown require Popper.js

Here are the steps to reproduce. First, install the packages:

$ npm install --save jquery [email protected] popper.js

Next, I've configured 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"
    ]
  }

Notice in the config above that:

• popper.js is registered before bootstrap
• the UMD module is used
• popper.js is set as a dependency for bootstrap, next to jquery

Finally, in my app.ts:

import 'bootstrap';

With this configuration, building using au build works fine. But upon running, using au run --watch I get the following console errors:

Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) (defaults.js:19)
Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) (bootstrap.min.js:6)
... a bit further on:
Uncaught TypeError: plugin.load is not a function at Module. (defaults.js:19)

Unfortunately, the Bootstrap 4 docs only mention instructions on webpack. So does a search on both Aurelia's Gitter.im channel and on StackOverflow. I cannot find samples regarding Aurelia CLI with Require.js. Finally, Google hits shows only examples for embedding the alpha versions (which relied on 'tethering' rather than 'popper').

Similar questions on SO, which have the same error but aren't applicable to 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, my question: how can I configure Bootstrap 4 with Popper.js in an Aurelia CLI app (using Require.js, not Webpack)?

Thanks.

Answer 1

Popper replaced Tether in the beta.

As such you will need to swap out tether with popper (or just add it if you never had the alpha) to the prepend section of your aurelia.json file. (Make sure you link to the UMD version seen below)

"prepend": [
   ...
          "node_modules/jquery/dist/jquery.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
   ...
     ]

You will also need the bundling as expected, something like this:

      {
        "name": "bootstrap4",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": [
          "jquery"
        ],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }

=Addendum=

Unlike tether, popper does not need to be prepended it seems. So you could include it like any other dependency with

 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },

Answer 2

I uninstalled popper.js and used the version built into bs4 by using js/bootstrap.bundle.min instead of js/bootstrap.min

  "jquery",
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.bundle.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  },

Answer 3

Add in your code.

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>