Bootstrap v4 runtime/load error in Aurelia

Question

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.

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

However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/[email protected] as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.

Build is always clean; the error occurs at run-time:

DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css

EDIT:

Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.

EDIT2:

I've created steps to reproduce the bug:

$ au new
name  # can be any valid value
2     # Selects TypeScript as the language
1     # Create project structure
1     # Install dependencies

cd into the project directory.

Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json

$ npm install jquery --save
$ npm install bootstrap@^4.0.0-beta --save

Change src/app.html to the following:

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
</template>

Finally, execute either of the following and browse to the provided URL.

$ au run

OR

$ au build
$ serve

This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.

Edit3:

Thanks to @vidriduch, everything appears to be working. However, if you look at the console, you find the following:

Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]

These are the two very first messages when the page loads in debug mode, but no other errors arise.

Answer 1

You are missing popper.js dependency for Bootstrap 4.0.0-beta. In order for Aurelia to accept this add

 "node_modules/popper.js/dist/umd/popper.js"

on the top (as per comment from @hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)

Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so

npm install [email protected]

or

yarn add [email protected]

and it should work :)

Answer 2

Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap@^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.

So run npm install bootstrap@^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.