15

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:

So, my question: how can I configure Bootstrap 4 with Popper.js in an Aurelia CLI app (using Require.js, not Webpack)?

Thanks.

Juliën
  • 9,047
  • 7
  • 49
  • 80

6 Answers6

13

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"
 },
4imble
  • 13,979
  • 15
  • 70
  • 125
  • Awesome, adding the "prepend" indeed works, even without altering my original bundling. Thanks! – Juliën Aug 22 '17 at 11:58
  • 1
    Not sure you'll want popper in the bundling as well as you will be including it twice. – 4imble Aug 22 '17 at 11:59
  • This is awesome thanks for the question and for the reply! – Jhonatas Kleinkauff Aug 22 '17 at 12:11
  • I've followed these instructions to the letter, and no longer get the jQuery is nor defined error. However, I now get `Uncaught TypeError: Popper is not a constructor`. In my `main.ts` I have included `import "jquery"; import * as Popper from "popper.js"; (window).Popper = Popper.default; import "bootstrap"; ` This is using aurelia-cli. – Jeremy Holt Sep 01 '17 at 19:49
  • 1
    You definitely targeting the UMD version of popper? it lives in a different folder. – 4imble Sep 02 '17 at 08:16
  • This is not working for me, I get `Uncaught SyntaxError: Unexpected token export`. I assume this `prepend` business is more of a workaround rather than how it's supposed to work? – Joakim Oct 21 '17 at 14:54
  • In prepend, make sure tu add popper.js before require.js. – BlakSneil Dec 14 '17 at 14:52
  • @JeremyHolt ever get it working? Currently I'm getting the same issue. – rball May 10 '18 at 16:27
7

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"
    ]
  },
smoore4
  • 4,520
  • 3
  • 36
  • 55
  • 2
    I find this the easiest way to solve the problem. Note to other readers: in the zipfile they are providing for download (currently) the file is "`bootstrap-4.0.0/dist/js/bootstrap.bundle.min.js`" – knb Jan 24 '18 at 11:59
  • Solved my problem as well. Just reference "bootstrap.bundle.min.js" – Sameer Jul 03 '18 at 21:21
5

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>
Diogo Santos
  • 61
  • 1
  • 2
4

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"
   ],
Tim Tharratt
  • 1,251
  • 1
  • 10
  • 18
  • How do you reference Popper in your files? – rball May 10 '18 at 00:05
  • In ASP.NET MVC change reference from bootstrap to bootstrap.bundle bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.bundle.js", "~/Scripts/respond.js" ));' – moto_geek Apr 04 '19 at 20:52
0

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

Waku-2
  • 1,136
  • 2
  • 13
  • 26
0

With the new bootstrap 4 you can just include this:

<script type="text/javascript" src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js">
</script>

Popper.js is already included in this file. Check bootstrap documentation dropdowns: https://getbootstrap.com/docs/4.0/components/dropdowns/#overview

PS: You need to install bootstrap 4 ofcourse! It might not be exactly your answer but it might help alot for other people who aren't using Aurelia CLI and Require.js

Allart
  • 830
  • 11
  • 33