CODEWITHSUNDEEP
aurelia
Paul
Paul

Reputation: 36319

Basic custom element does not seem to work

I'm trying to create a standard user status widget for my Aurelia app, and I'm not sure what I'm doing wrong. As a starting point I followed the docs, but my results aren't what they tell me to expect and I'm not getting errors either in build nor in the browser.

Relevant files are as follows:

<!-- nav-bar.html -->
<template bindable='router'>
  <require from="./user-status "></require>
  <!-- various nav buttons -->
  <p class="navbar-collapse collapse navbar-text">
        Test <user-status></user-status>
      </p>

user-status.html

<template>
  ${status}
</template>

user-status.js

export default class UserStatusCustomElement {
      constructor() {
        this.status = 'Be sure to drink your Ovaltine!';
      }
    }

if I change the require in nav-bar.html to look for ./user-status.html it appears to have an effect (additional aurelia-looking attributes are added to the user-status element in the rendered html) but does not render the message (one assumes b/c it's not picking up the class and rendering as an html-only thing). If I leave as-is, it doesn't error but those attributes are not added and nothing is rendered, even static text.

Upvotes: 0

Views: 72

Answers (1)

Kelly Ethridge
Kelly Ethridge

Reputation: 1668

I played around with your code and found that removing default from the user-status.js module fixed the problem. I suspect the reason has something to do with how Aurelia utilizes module-loaders (System.js, webpack, ...) when importing modules. Unfortunately I don't know enough about the internals of Aurelia to give a more in-depth answer.

Upvotes: 3

Related Questions