Using webpack I can't load a viewmodel

Hey all, I’m really new to Aurelia and am running into a problem. A finally got a basic project setup and running using webpack. I am now trying to create my first component. At least I think it’s a component. I want to display some information about a logged in user. I can get it to load the .html file with no problem. But I can’t get it to include the backing typescript. I am able to get it to load the html by putting <require from="../debug/userinformation.html" /> and then a <UserInformation></UserInformation> element in the page I want it displayed on. I have turned on the analysis of the packed js file and found that the javascript isn’t even being included in it.

I feel like I’ve tried everything, but there’s something I’m missing.
Things I have tried (that I can remember):

  • <require from="../debug/UserInformation.html" /> <- only displays the html
  • <require from="../debug/UserInformation" /> <- breaks with an ugly error on the page saying its not found
  • <require from="../debug/UserInformation.ts" /> <- breaks with an ugly error on the page saying its not found
  • <require from="../debug/UserInformation.js" /> <- breaks with an ugly error on the page saying its not found
  • In boot.ts, adding to the Aurelia.use, .globalResources("app/components/debug/UserInformation"). With this I just get an error saying Error: Unable to find module with ID: app/components/debug/UserInformation. I have tried with .html, .js and .ts extensions. Same error (with the extension).
  • Adding import UserInformation from "./app/components/debug/UserInformation"; to boot.ts. This didn’t include it either.

Here’s my UserInformation.html

<template>
    Hello!
    <button click.trigger="speak()">Say hello to the world</button>
</template>

Here’s UserInformation.ts

import { autoinject, customElement } from 'aurelia-framework';

@autoinject
export default class {
    constructor() {
        console.log("<<FOUND IT!>>"); //never logged
    }
    public async attached() {
        console.log("hello"); //never logged
    }
    public speak() {
        alert("Spoken"); //never called
    }
}

If anybody can offer any guidance on creating a component while using webpack that may help. The little example offered in the docs yielded the same results, backing javascript was not found or executed.

Your issue here seems to be that you are exporting default

this is what I would do

  • rename UserInformation.* to user-information.*
  • export class UserInformation...
  • if you are “in” some components subfolder then <require from="../debug/user-information" />
  • and use it like <user-information></user-information>
  • if you wish to use globalResources instead of require then .globalResources(PLATFORM.moduleName("app/components/debug/user-information"))
1 Like

Thank you! The export default was the problem. Thanks for the suggestions on the naming since that looks like the way the rest of Aurelia is done I will go that route with my project :smiley:. So far I like Aurelia far more than Angular 2. It’s a lot easier to understand and follow.