Using aurelia-cli unable to get bootstrap and a couple of templates to work

Question

We're researching aurelia-cli as a replacement for webpack and trying to understand its bundling and packaging by running a simple app with bootstrap and a couple of templates.

what we did:

au new with standard configuration and install dependencies
added import 'bootstrap'; to main.js after the environment import statement
npm installed jquery and bootstrap

added entries to aurelia.json

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

Added bootstrap to app

export class App {
  constructor() {

  }
}

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="pull-left" href="#"></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Events <span class="sr-only">(current)</span></a>
          </li>
          <li><a href="#">Discussion</a>
          </li>
          <li><a href="#">Job Board</a>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a>
              </li>
              <li><a href="#">Another action</a>
              </li>
              <li><a href="#">Something else here</a>
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
  <div class="container-fluid">
    <div class="col-xs-10">
      <compose view-model="events"></compose>
    </div>
    <div class="col-xs-2">
      <compose view-model="sponsors"></compose>
    </div>
  </div>
</template>

Added sponsors.html & sponsors.js and events.html & events.js in src at same level as app.js. both html and js files for these two contain just and class definitions respectively. They're empty otherwise.

When I run au run --watch, I get 3 js errors and 2 warnings:

vendor-bundle.js:24678 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) @ vendor-bundle.js:24678
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) @ bootstrap.min.js:6

above error appears twice

vendor-bundle.js:3777 Uncaught TypeError: h.load is not a function

Warnings:

Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
    at fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:23479:13)
    at http://localhost:9000/scripts/vendor-bundle.js:23518:16
From previous event:
    at CSSResource.load (http://localhost:9000/scripts/vendor-bundle.js:23517:10)
    at ResourceDescription.load (http://localhost:9000/scripts/vendor-bundle.js:19128:28)
    at ResourceModule.load (http://localhost:9000/scripts/vendor-bundle.js:19077:37)
    at http://localhost:9000/scripts/vendor-bundle.js:19438:43
From previous event:
    at ViewEngine.importViewResources (http://localhost:9000/scripts/vendor-bundle.js:19407:52)
    at ViewEngine.loadTemplateResources (http://localhost:9000/scripts/vendor-bundle.js:19377:19)
    at http://localhost:9000/scripts/vendor-bundle.js:19325:41
From previous event:
    at ViewEngine.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:19309:67)
    at ConventionalViewStrategy.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:16729:25)
    at HtmlBehaviorResource.load (http://localhost:9000/scripts/vendor-bundle.js:20067:29)
    at http://localhost:9000/scripts/vendor-bundle.js:20600:18
From previous event:
    at CompositionEngine.createController (http://localhost:9000/scripts/vendor-bundle.js:20588:71)
    at CompositionEngine._createControllerAndSwap (http://localhost:9000/scripts/vendor-bundle.js:20567:19)
    at CompositionEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20647:21)
    at TemplatingEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20915:38)
    at Aurelia.setRoot (http://localhost:9000/scripts/vendor-bundle.js:10267:21)
    at http://localhost:9000/scripts/app-bundle.js:82:22
From previous event:
    at Object.configure (http://localhost:9000/scripts/app-bundle.js:81:21)
    at http://localhost:9000/scripts/vendor-bundle.js:10022:22
From previous event:
    at config (http://localhost:9000/scripts/vendor-bundle.js:10017:48)
    at handleApp (http://localhost:9000/scripts/vendor-bundle.js:10008:12)
    at http://localhost:9000/scripts/vendor-bundle.js:10041:13
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:10039:40
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:10038:29
From previous event:
    at run (http://localhost:9000/scripts/vendor-bundle.js:10034:26)
    at Object. (http://localhost:9000/scripts/vendor-bundle.js:10061:3)
    at Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:3785:299)
    at Object.check (http://localhost:9000/scripts/vendor-bundle.js:3774:50)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3779:58)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3783:433)
    at Object. (http://localhost:9000/scripts/vendor-bundle.js:3778:436)
    at http://localhost:9000/scripts/vendor-bundle.js:3763:140
    at y (http://localhost:9000/scripts/vendor-bundle.js:3762:207)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3777:469)
    at Object.init (http://localhost:9000/scripts/vendor-bundle.js:3772:154)
    at http://localhost:9000/scripts/vendor-bundle.js:3782:308

any help is much appreciated.

Ashley Grant Ashley Grant · Accepted Answer · 2016-10-20T16:59:16

The issues you are seeing with Bootstrap are because Bootstrap's JavaScript is not written to expect using a module aware jQuery. It expects jQuery to be a property on the window object. It can be seen in line 7 here: https://github.com/twbs/bootstrap/blob/v3-dev/dist/js/bootstrap.js#L7

if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\'s JavaScript requires jQuery')
}

Currently, the Aurelia CLI is unable to load font files, and thus doesn't really support bundling Bootstrap's CSS. My personal recommendation is to load Bootstrap (both CSS and JS) from a CDN. It is necessary to also load jQuery from a CDN in this case.

Also, please do not use compose to do what you're doing here. events and sponsors should be custom elements that are loaded using the require element. Using compose to load them is a misuse of the compose element, and you will pay a performance penalty for using it.

Using aurelia-cli unable to get bootstrap and a couple of templates to work

2 Answers