amythn04 amythn04 - 1 month ago 38
jQuery Question

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

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:


  1. au new with standard configuration and install dependencies

  2. added
    import 'bootstrap';
    to main.js after the environment import statement

  3. npm installed jquery and bootstrap

  4. added entries to aurelia.json

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

  5. 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>






  1. 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.

Answer

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.

Comments