Francesco Paoletti Francesco Paoletti - 2 months ago 9
Javascript Question

Aurelia official contact list tutorial fails to render after adding Bootstrap configurations

I'm following the official Aurelia tutorial to build a contact list app.

I'm stuck at "Building Out The Default Route" step and I start to get really pissed off.

I added the vendor dependencies for bootstrap and jquery as shown in the tutorial, but when i launch the page, renders blank and console outputs several errors:

Uncaught TypeError: h.load is not a function

Unhandled rejection Error: Failed loading required CSS file: ../node_modules/bootstrap/css/bootstrap.css
at fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:23357:13)
at http://localhost:9000/scripts/vendor-bundle.js:23396:16


now, i googled a lot, found several users having the same problem, but every fix didn't work. I tried several fix, checking for typos and errors (i'm just halfway of the tutorial, how many typing mistakes may i have done???), restart
au run --watch
, even copy paste the code directly from the tutorial page (i hate to do this because doesn't help my learning, but i was desperate). Nothing, the exact same errors continue to fire up and the page is still blank. I'm really freaking out about this apparently small stupid issues like completing an official tutorial.

Complete source here I included ALL files on purpose, to show you exactly how my sourcebase looks like.

aurelia.json


{
"name": "Contact Manager",
"type": "project:application",
"platform": {
"id": "web",
"displayName": "Web",
"output": "scripts"
},
"transpiler": {
"id": "babel",
"displayName": "Babel",
"fileExtension": ".js",
"options": {
"plugins": [
"transform-es2015-modules-amd"
]
},
"source": "src/**/*.js"
},
"markupProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".html",
"source": "src/**/*.html"
},
"cssProcessor": {
"id": "none",
"displayName": "None",
"fileExtension": ".css",
"source": "src/**/*.css"
},
"editor": {
"id": "vscode",
"displayName": "Visual Studio Code"
},
"unitTestRunner": {
"id": "karma",
"displayName": "Karma",
"source": "test/unit/**/*.js"
},
"paths": {
"root": "src",
"resources": "src/resources",
"elements": "src/resources/elements",
"attributes": "src/resources/attributes",
"valueConverters": "src/resources/value-converters",
"bindingBehaviors": "src/resources/binding-behaviors"
},
"testFramework": {
"id": "jasmine",
"displayName": "Jasmine"
},
"build": {
"targets": [
{
"id": "web",
"displayName": "Web",
"output": "scripts"
}
],
"loader": {
"type": "require",
"configTarget": "vendor-bundle.js",
"includeBundleMetadataInConfig": "auto",
"plugins": [
{
"name": "text",
"extensions": [
".html",
".css"
],
"stub": true
}
]
},
"options": {
"minify": "stage & prod",
"sourcemaps": "dev & stage"
},
"bundles": [
{
"name": "app-bundle.js",
"source": [
"[**/*.js]",
"**/*.{css,html}"
]
},
{
"name": "vendor-bundle.js",
"prepend": [
"node_modules/bluebird/js/browser/bluebird.core.js",
"scripts/require.js"
],
"dependencies": [
"aurelia-binding",
"aurelia-bootstrapper",
"aurelia-dependency-injection",
"aurelia-event-aggregator",
"aurelia-framework",
"aurelia-history",
"aurelia-history-browser",
"aurelia-loader",
"aurelia-loader-default",
"aurelia-logging",
"aurelia-logging-console",
"aurelia-metadata",
"aurelia-pal",
"aurelia-pal-browser",
"aurelia-path",
"aurelia-polyfills",
"aurelia-route-recognizer",
"aurelia-router",
"aurelia-task-queue",
"aurelia-templating",
"aurelia-templating-binding",
{
"name": "text",
"path": "../scripts/text"
},
{
"name": "aurelia-templating-resources",
"path": "../node_modules/aurelia-templating-resources/dist/amd",
"main": "aurelia-templating-resources"
},
{
"name": "aurelia-templating-router",
"path": "../node_modules/aurelia-templating-router/dist/amd",
"main": "aurelia-templating-router"
},
{
"name": "aurelia-testing",
"path": "../node_modules/aurelia-testing/dist/amd",
"main": "aurelia-testing",
"env": "dev"
},
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
}
]
}
}


app.js


import { Router, RouterConfiguration} from 'aurelia-router';

export class App {
router: Router;

configureRouter(config: RouterConfiguration, router: Router) {
config.title = 'Contacts';
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select' },
{ route: 'contact/:id', muduleId: 'contact-detail', name:'contacts' }
]);

this.router = router;
}
}


and
app.html


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

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>

<div class="container">
<div class="row">
<div class="col-md-4">
Contact List Placeholder
</div>

<router-view class="col-md-8"></router-view>
</div>
</div>
</template>

Answer

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

needs to be

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

You've also mispelled moduleId in the contacts route in app.js. You've got muduleId.

Comments