aurelia custom plugin that uses a custom attribute - cant find custom attribute

Question

Hi i have downloaded the hello world aurelia skelton plugin from https://github.com/aurelia/skeleton-plugin . i then reference this from the package.json file in a fresh copy of the aurelia esnext/webpack skelton (https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-webpack) as my main app. i can then use the plugin in one of my components with

<require from="aurelia-skeleton-plugin/hello-world"></require>

at the top of the view and placing <hello-world></hello-world> anywhere on the view. this works great.

next step i want to try is adding a custom attribute to my plugin. in the src folder of my plugin i added the simple custom attribute

export class RedSquareCustomAttribute {
  static inject = [Element];

  constructor(element){
    this.element = element;
    this.element.style.width = this.element.style.height = '100px';
    this.element.style.backgroundColor = 'red';
  }
}

i then reference this in my hello-world.html page with the following code

<require from="./red-square"></require>
  <div red-square></div>

run gulp build, then reinstall the package in my main app. in the main app npm start builds ok but the browser gives me the error: Cannot find module './aurelia-skeleton-plugin/red-square'

ive read lots of docs but nothing gives an example of this scenario and any help would be greatly appreciated.

yes im just using the simple example from the docs aurelia.io/hub.html#/doc/article/aurelia/templating/latest/… just to get it working first — user4912152

8protons 8protons · Accepted Answer · 2017-08-22T22:14:00

Here are some things to try- though I got it to work out of the box from the tutorial in the link that you provided.

Confirm that babelOptions in config.js has classProperties.

  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system",
      "es7.classProperties"
    ]
  },

Next, please double check that your files are properly placed in the src folder and named:

red-sqaure.js
simple-attribute-usage.html

Then, whichever HTML file has your content- your shell / app, do something like the following:

<compose view="simple-attribute-usage.html" viewmodel="red-square"></compose>

though I was able to get original HTML to work

<require from="./red-square"></require>
  <div red-square></div>

aurelia custom plugin that uses a custom attribute - cant find custom attribute

1 Answers