Bootstrap 4 error “Bootstrap dropdown require Popp

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 bootstrap@4.0.0-beta 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

Using the bundled version of BS4 worked for me as follows :-

Remove popper npm uninstall popper.js

Update to BS4 or later npm install bootstrap --save

Make sure jquery is installed npm install bootstrap --save

Edit `.angular-cli.json' to include jquery and bundled BS4

   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],

Answer 2

as of final bootstrap 4.0 below is the working conf for bootstrap with popper

//file; aurelia_project/aurelia.json
"dependencies": [   
    ...
    ... // other dependencies
    ...

   "text",
   "jquery",
   {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
   },
   {
     "name": "bootstrap",
     "path": "../node_modules/bootstrap/dist",
     "main": "js/bootstrap.min",
     "deps": ["jquery"],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
     ]
   },
...
... // remaining dependencies
...
],

This works with latest aurelia & bootstrap (as of 2018-Feb) without using the prepend method

Answer 3

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 4

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>

Answer 5

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"
 },