The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

264445 (9) [Avatar] Offline
Hello Sean,
Picking up Aurelia again and following the example in chapter3. I noticed a few issues:

  • The listing 3.3 for the app.js I think requires bootstrap to be installed locally (it's not mentioned in the previous text).

  • I have a problem with listing 3.15. I am getting the error message in the console: "$(...).tooltip is not a function". It points to the attached method.

  • I am getting some strange messages when I put in the third party tools (bootstrap, jquery). I see in the console the error messages (unreachable code after return) pointing to vendor-bundle.js (line 3599).

  • I've tried to hunt around to see where I am going wrong, but I'm not sure (perhaps these are just my problem).

    125443 (2) [Avatar] Offline
    Hi Adil,

    Thanks for getting in touch. You're absolutely right.

    Listing 3.3 should be as follows:

        <require from="styles.css"></require>
         <div class="container">
            <div class="header clearfix">
            <h3 class="text-muted"><span class="brand-highlight">my </span> books</h3>
          <footer class="footer">
            <p>&copy; Aurelia Demo 2017</p>
        </div> <!-- /container -->

    I'll be sure to get this corrected in the next update. If your ./index.html file is as follows:

    Then Bootstrap and jQuery should work. In case you're still having problems you can check out the completed working version of chapter 3 here:

    git clone
    cd Chapter-3-Complete\my-books
    npm install
    au run --watch

    You can jump to any completed working chapter using that method, and if you find that my listings for how to complete each of the steps are incorrect or misleading, then please let me know as you've done here smilie:

    There is one issue with the Bootstrap alpha version that you may see the following error in the console log on tooltip hover:

    Uncaught Error: Tooltip is transitioning
        at (bootstrap.min.js:7)
        at h._enter (bootstrap.min.js:7)
        at HTMLSpanElement.<anonymous> (bootstrap.min.js:7)
        at HTMLSpanElement.handle (jquery-3.1.1.slim.min.js:3)
        at HTMLSpanElement.dispatch (jquery-3.1.1.slim.min.js:3)
        at HTMLSpanElement.q.handle (jquery-3.1.1.slim.min.js:3)

    This one can be safely ignored but will be corrected in the next update which includes a transition to the Bootstrap 4 beta.

    If you still have problems after checking out the completed version then please let me know by replying to this thread. If you'd like to share you're working copy with me I'd be happy to take a look and help diagnose any problems as well.

    b.merritt (7) [Avatar] Offline
    On page 79, listing 3.18, there is no mention of importing bindable from aurelia-framework. On page 75 the import statement is, import {inject} from 'aurelia-framework' and on page 79 it needs to be import {inject, bindable} from 'aurelia-framework'.

    Sean Hunter (29) [Avatar] Offline
    Hi Bruce,

    Thanks for highlighting this! Have noted it down for correction in the next MEAP update.

    505970 (10) [Avatar] Offline
    I have noticed that the code samples for book-list 3.4 and/or 3.16 is missing the <div class="book row"> above <div class="col-10">${book.title}</div>. so if you place the missing line in 3.4 it should look like
        <ul class="books list-group list-group-flush">
          <li class="list-group-item" repeat.for="book of books">
            <div class="book row>
                <div class="col-10">${book.title}</div>

    or 3.16 would look like
    view source

      <require from="../attributes/tooltip"></require>
              <div class="book row">
                  <div class="col-10">${book.title}</div>
                  <div class="col-1">
                       <span class="remove-button"       
                          title='Remove book from list'>
                          <i class="fa fa-trash" aria-hidden="true"></i>

    Sean Hunter (29) [Avatar] Offline
    Ah nice find. Thanks for the feedback. It's actually great timing since I'm in the midst of preparing for the next MEAP update. I'll incorporate this fix.

    505970 (10) [Avatar] Offline

    I see that in chapter 4 in section 4.2 listing 4.6 you are also editing book-listing. it is also missing the same div as chapter 3 is. glad the feedback is helping.
    Sean Hunter (29) [Avatar] Offline
    Nice catch. I'll review this and get it updated for the upcoming MEAP smilie.

    9723 (1) [Avatar] Offline
    Checked out latest Chapter-3-Complete from:

    Building and running gives 404 error when requesting "http://localhost:9000/popper.js" - and console error:

    Unhandled rejection Error: Script error for "popper.js", needed by: bootstrap/js/bootstrap.min
    at makeError (http://localhost:9000/scripts/vendor-bundle.js:3962:17)
    at HTMLScriptElement.onScriptError (http://localhost:9000/scripts/vendor-bundle.js:5532:36)

    It seems that you can fix this by:

  • updating to latest version - "bootstrap": "^4. 0.0"

  • removing the prepend entry - "node_modules/popper.js/dist/umd/popper.min.js"

  • using the popper bundled with bootstrap - eg, change to "js/bootstrap.bundle.min"

  •  "jquery",
                "name": "bootstrap",
                "path": "../node_modules/bootstrap/dist",
                "main": "js/bootstrap.bundle.min",
                "deps": [
               "exports": "$",
               "resources": [

    Sean Hunter (29) [Avatar] Offline
    Ah thanks for raising this! I'll look into it and get a fix applied to the GitHub repo smilie.