Error in Contact Manager tutorial about app-contacts HOT 20 CLOSED

I was stuck at this part of the tutorial until I stopped the watch and run "au run --watch" again.

from app-contacts.

I've had a same error. I fixed it by disabling sass in aurelia.json. Replace this section

"cssProcessor": {
    "id": "sass",
    "displayName": "Sass",
    "fileExtension": ".scss",
    "source": "src/**/*.scss"
}

to this

"cssProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".css",
    "source": "src/**/*.css"
}

from app-contacts.

@EisenbergEffect, I've finally figured out the issue (possibly my issue, and not the OP's problem).

Problem

During project setup and when presented with the choice below:

What css processor would you like to use?

1. None (Default)
   Use standard CSS with no pre-processor.
2. Less
   Extends the CSS language, adding features that allow variables, mixins,
   functions and many other techniques.
3. Sass
   A mature, stable, and powerful professional grade CSS extension.
4. Stylus
   Expressive, dynamic and robust CSS.
5. Post CSS
   A tool for transforming CSS with JavaScript.

most, like I did, will gravitate towards a familiar choice. Since the tutorial did not explicitly mention choosing option 1, I went with option 3 instead, which is the root cause of this issue. This is because the preprocessor expects at least one Sass file to be passed to its render method and fails when nothing is passed.

Solution

1. Restart the CLI (may not be necessary) after installing bootstrap and jquery. This is possibly a Heisenbug.
2. When choosing Sass, the file src/styles.css file must be changed to src/styles.scss. The <require> statement in the template should remain unchanged.

Going forward

Should we update the tutorial to:

1. Explicitly state that the user should choose the default option for CSS?
2. Restart the CLI after installing dependencies?

from app-contacts.

I have errors on "Building Out the Default Route" section, instead of get an error because no-selection module is missing, I'm getting :

INFO [aurelia] Aurelia Started
vendor-bundle.js:12708 DEBUG [templating] importing resources for app.html ["bootstrap/css/bootstrap.css", "style.css"]
2vendor-bundle.js:3675 Uncaught TypeError: h.load is not a function(anonymous function) @ vendor-bundle.js:3675(anonymous function) @ vendor-bundle.js:3661w @ vendor-bundle.js:3665callPlugin @ vendor-bundle.js:3673fetch @ vendor-bundle.js:3671check @ vendor-bundle.js:3671enable @ vendor-bundle.js:3677enable @ vendor-bundle.js:3681(anonymous function) @ vendor-bundle.js:3676(anonymous function) @ vendor-bundle.js:3661y @ vendor-bundle.js:3660enable @ vendor-bundle.js:3675init @ vendor-bundle.js:3670(anonymous function) @ vendor-bundle.js:3680


vendor-bundle.js:1335 Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
    at fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:22581:13)
    at http://localhost:9000/scripts/vendor-bundle.js:22620:16
From previous event:
    at CSSResource.load (http://localhost:9000/scripts/vendor-bundle.js:22619:10)
    at ResourceDescription.load (http://localhost:9000/scripts/vendor-bundle.js:18766:28)
    at ResourceModule.load (http://localhost:9000/scripts/vendor-bundle.js:18715:37)
    at http://localhost:9000/scripts/vendor-bundle.js:19076:43
From previous event:
    at ViewEngine.importViewResources (http://localhost:9000/scripts/vendor-bundle.js:19045:52)
    at ViewEngine.loadTemplateResources (http://localhost:9000/scripts/vendor-bundle.js:19015:19)
    at http://localhost:9000/scripts/vendor-bundle.js:18963:41
From previous event:
    at ViewEngine.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:18947:67)
    at ConventionalViewStrategy.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:16367:25)
    at HtmlBehaviorResource.load (http://localhost:9000/scripts/vendor-bundle.js:19700:29)
    at http://localhost:9000/scripts/vendor-bundle.js:20233:18
From previous event:
    at CompositionEngine.createController (http://localhost:9000/scripts/vendor-bundle.js:20221:71)
    at CompositionEngine._createControllerAndSwap (http://localhost:9000/scripts/vendor-bundle.js:20200:19)
    at CompositionEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20280:21)
    at TemplatingEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20544:38)
    at Aurelia.setRoot (http://localhost:9000/scripts/vendor-bundle.js:10448:21)
    at http://localhost:9000/scripts/app-bundle.js:45:59
From previous event:
    at Object.configure (http://localhost:9000/scripts/app-bundle.js:45:25)
    at http://localhost:9000/scripts/vendor-bundle.js:9874:29
From previous event:
    at config (http://localhost:9000/scripts/vendor-bundle.js:9873:48)
    at handleApp (http://localhost:9000/scripts/vendor-bundle.js:9864:12)
    at http://localhost:9000/scripts/vendor-bundle.js:9893:13
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:9891:40
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:9890:29
From previous event:
    at run (http://localhost:9000/scripts/vendor-bundle.js:9886:26)
    at Object.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:9913:3)
    at Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:3683:299)
    at Object.check (http://localhost:9000/scripts/vendor-bundle.js:3672:50)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3677:58)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3681:433)
    at Object.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:3676:436)
    at http://localhost:9000/scripts/vendor-bundle.js:3661:140
    at y (http://localhost:9000/scripts/vendor-bundle.js:3660:207)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3675:469)
    at Object.init (http://localhost:9000/scripts/vendor-bundle.js:3670:154)
    at http://localhost:9000/scripts/vendor-bundle.js:3680:308

I'm following the typescript version.

Project folder link: https://drive.google.com/file/d/0B0RgFEOWLZfpenE4bUN2NEV4dXc/view?usp=sharing

from app-contacts.

Description
Similar error as chespinoza. Following contact manager tutorial. All works, but breaks when I add <require from="../node_modules/bootstrap/dist/css/bootstrap.css"></require> to app.html. See Fix below.

Console output
...
INFO [aurelia] Aurelia Started
DEBUG [templating] importing resources for app.html ["../node_modules/bootstrap/dist/css/bootstrap.css"]
Uncaught TypeError: h.load is not a function vendor-bundle.js:3675

Environment
Mac OS X 10.11.5
Vagrant 1.8.4
CentOS 7 Linux 3.10.0-327.4.5.el7.x86_64 (Running/hosting code here)
Node v4.4.7

Fix
Adding the snippet from tutorial to project/aurelia_project/aurelia.json to add in Jquery and Bootstrap to vendor bundle dependency means I only needed to:

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

And I could copy/paste dropdown menu from Bootstrap website and it worked!

My problem was that I didn't carefully look at the snippet that the tutorial adds, which creates a "name" for bootstrap, points to the node_modules directory, and also adds in bootstrap.min.js, so Aurelia is now wired up and the simple "require" makes Aurelia aware of bootstrap.css/js and JQuery.

Also, looked at your code, chespinoza, and it looks like a simple typo in your app.html.

You typed "style.css" vs "styles.css"

Apologies qujck, not sure what your specific issue is, but I'm posting this here because searching for "Aurelia Uncaught TypeError: h.load" lead me here.

Hope this helps someone! I'm just really excited about being able to use Bootstrap in Aurelia finally!

from app-contacts.

A little mistake, there is a section for the "contact-list.html" code named "no-selection.html".

from app-contacts.

...and also for the contact-detail.html that is named app.html

from app-contacts.

I fixed this by adding the following import to main.ts.

import 'bootstrap';

from app-contacts.

I'm having a similar issue but its with this bit below in app.html
<require from="./styles.css"></require>

I get these console errors and am not sure what's happening.. Halp.
vendor-bundle.js:3740 Uncaught TypeError: h.load is not a function(anonymous function) @ vendor-bundle.js:3740(anonymous function) @ vendor-bundle.js:3726w @ vendor-bundle.js:3730callPlugin @ vendor-bundle.js:3738fetch @ vendor-bundle.js:3736check @ vendor-bundle.js:3736enable @ vendor-bundle.js:3742enable @ vendor-bundle.js:3746(anonymous function) @ vendor-bundle.js:3741(anonymous function) @ vendor-bundle.js:3726y @ vendor-bundle.js:3725enable @ vendor-bundle.js:3740init @ vendor-bundle.js:3735(anonymous function) @ vendor-bundle.js:3745 vendor-bundle.js:1384 Unhandled rejection Error: Failed loading required CSS file: styles.css at fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:22646:13) at http://localhost:9000/scripts/vendor-bundle.js:22685:16 From previous event: at CSSResource.load (http://localhost:9000/scripts/vendor-bundle.js:22684:10) at ResourceDescription.load (http://localhost:9000/scripts/vendor-bundle.js:18971:28) at ResourceModule.load (http://localhost:9000/scripts/vendor-bundle.js:18920:37) at http://localhost:9000/scripts/vendor-bundle.js:19281:43 From previous event: at ViewEngine.importViewResources (http://localhost:9000/scripts/vendor-bundle.js:19250:52) at ViewEngine.loadTemplateResources (http://localhost:9000/scripts/vendor-bundle.js:19220:19) at http://localhost:9000/scripts/vendor-bundle.js:19168:41 From previous event: at ViewEngine.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:19152:67) at ConventionalViewStrategy.loadViewFactory (http://localhost:9000/scripts/vendor-bundle.js:16572:25) at HtmlBehaviorResource.load (http://localhost:9000/scripts/vendor-bundle.js:19905:29) at http://localhost:9000/scripts/vendor-bundle.js:20438:18 From previous event: at CompositionEngine.createController (http://localhost:9000/scripts/vendor-bundle.js:20426:71) at CompositionEngine._createControllerAndSwap (http://localhost:9000/scripts/vendor-bundle.js:20405:19) at CompositionEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20485:21) at TemplatingEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:20749:38) at Aurelia.setRoot (http://localhost:9000/scripts/vendor-bundle.js:10340:21) at http://localhost:9000/scripts/app-bundle.js:83:28 From previous event: at Object.configure (http://localhost:9000/scripts/app-bundle.js:82:25) at http://localhost:9000/scripts/vendor-bundle.js:9213:29 From previous event: at config (http://localhost:9000/scripts/vendor-bundle.js:9212:48) at handleApp (http://localhost:9000/scripts/vendor-bundle.js:9203:12) at http://localhost:9000/scripts/vendor-bundle.js:9232:13 From previous event: at http://localhost:9000/scripts/vendor-bundle.js:9230:40 From previous event: at http://localhost:9000/scripts/vendor-bundle.js:9229:29 From previous event: at run (http://localhost:9000/scripts/vendor-bundle.js:9225:26) at Object.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:9252:3) at Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:3748:299) at Object.check (http://localhost:9000/scripts/vendor-bundle.js:3737:50) at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3742:58) at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3746:433) at Object.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:3741:436) at http://localhost:9000/scripts/vendor-bundle.js:3726:140 at y (http://localhost:9000/scripts/vendor-bundle.js:3725:207) at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3740:469) at Object.init (http://localhost:9000/scripts/vendor-bundle.js:3735:154) at http://localhost:9000/scripts/vendor-bundle.js:3745:308

from app-contacts.

@zfrankdesign I get the same errors and I have no idea whats wrong. One thing I've noticed is that
bootstrap.css is actually located at dist/css not just css as stated in this piece of code <require from="bootstrap/css/bootstrap.css"></require>

I really would like to complete this tutorial..

from app-contacts.

@matt-ankerson thanks a lot Matt, this actually works. Should have figured that out myself

from app-contacts.

I reworked this example because I thought putting the contacts directly in the code was a little unrealistic, for example:
let contacts = [ { id:getId(), firstName:'John', lastName:'Tolkien', email:'[email protected]', phoneNumber:'867-5309' },...

Instead, I wanted to simulate a json service so it looks like this instead: let contacts = "./src/apiData.json"; json

This involves adding http-fetch-client and some other changes. The entire project is here:

https://github.com/smoore4moma/contact-manager-http

BTW, I pretty much ran into all the same issues mentioned in this thread along the way.

from app-contacts.

None of the fixes in this thread are working for me. I'm also trying to use the Bootstrap CDN link directly and getting the same error.

from app-contacts.

@EisenbergEffect any feedback on this? I too am stuck on this point in the tutorial. What can we do to make the on-boarding experience better?

from app-contacts.

@stavarotti I can't say since I don't think anyone on our team has been able to reproduce this. It may be from not having installed bootstrap, needing to restart the watch task, having an incompatible version of npm or node, etc. I'm just guessing. As I said, we haven't been able to reproduce the problem.

from app-contacts.

aka "it works on my machine". I was really excited after getting caught up in all the hype around Aurelia. What a disappointment it has been. Couldn't get the demo to work and zero feedback from the team around this issue.

from app-contacts.

It works on thousands of people's machines. We're going to need more info if you want us to track down the problem because we cannot reproduce it. It could be your node version, your npm version. You could have missed an install step. It could be an environment problem on your machine, etc.

from app-contacts.

@stavarotti Thank you! We will investigate the docs and make some improvements.

from app-contacts.

I had this problem then installed latest node and npm, and then from the tutorial page on the aurelia site:-

To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:

npm install bootstrap --save

Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:

npm install jquery@^2.2.4 --save

then restarted the app as packages were updated and ran it again ... FIXED!

from app-contacts.

I believe we have addressed the issue in the tutorial now.

from app-contacts.