I am trying to get the getting started app of Aurelia to work, but I am getting an error right at the first page. .html

The code in question :

export class Wele {
  heading = 'Wele to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  wele(){
    alert(`Wele, ${this.fullName}!`);
  }
}

The error :

    [21:46:19] Plumber found unhandled error:
 SyntaxError in plugin 'gulp-babel'
Message:
    D:/workspace/aurelia/navigation-app/src/app.js: Unexpected token (2:10)
  1 | export class Wele {
> 2 |   heading = 'Wele to the Aurelia Navigation App!';
    |           ^
  3 |   firstName = 'John';
  4 |   lastName = 'Doe';
  5 |
[21:46:19] Finished 'build-system' after 20 ms

I have to say that I am on windows, it might create some troubles.

I "solved" this problem by putting the variables in a constructor. But is the syntax above not valid ES6 ? is that ES7 or something not usable yet ?

I know that this code looks weird but I am not the author, it is the original code from Aurelia tutorial

I am trying to get the getting started app of Aurelia to work, but I am getting an error right at the first page. http://aurelia.io/get-started.html

The code in question :

export class Wele {
  heading = 'Wele to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  wele(){
    alert(`Wele, ${this.fullName}!`);
  }
}

The error :

    [21:46:19] Plumber found unhandled error:
 SyntaxError in plugin 'gulp-babel'
Message:
    D:/workspace/aurelia/navigation-app/src/app.js: Unexpected token (2:10)
  1 | export class Wele {
> 2 |   heading = 'Wele to the Aurelia Navigation App!';
    |           ^
  3 |   firstName = 'John';
  4 |   lastName = 'Doe';
  5 |
[21:46:19] Finished 'build-system' after 20 ms

I have to say that I am on windows, it might create some troubles.

I "solved" this problem by putting the variables in a constructor. But is the syntax above not valid ES6 ? is that ES7 or something not usable yet ?

I know that this code looks weird but I am not the author, it is the original code from Aurelia tutorial

• javascript
• ecmascript-6
• aurelia

• Not knowing how you are setup, it is hard to tell why it did not work. I built the navigation-app in windows and it worked. Maybe a problem with your dependencies. – talves Commented Apr 13, 2015 at 21:55
• I really followed all the instructions of the get started page. And it is only a problem of syntax that's what makes it so weird... – sam Commented Apr 13, 2015 at 22:22
• @sam I updated your question to give it a bit better context, if you disagree please let me know and I can undo it. The issue is with your ES6 syntax and is not specific to Aurelia. Make sense? – PW Kad Commented Apr 14, 2015 at 14:28
• I am not sure it is ES6 but maybe directly ES7 , since this syntax is not valid in ES6 – sam Commented Apr 14, 2015 at 15:36

2 Answers 2

The following syntax is not valid ES6 syntax for classes. BUT, it is valid ES7 property initializer syntax for classes. To use it, if you are using Babel, you need to be sure to enable this feature specifically. This is documented in the Aurelia blog and it is configured as part of the latest skeleton.

export class Wele {
  heading = 'Wele to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  wele(){
    alert(`Wele, ${this.fullName}!`);
  }
}

But is the syntax above not valid ES6?

No it is not. Class bodies may only contain method definitions. It seems to work in experimental mode of Babel, though.

I "solved" this problem by putting the variables in a constructor.

This is the proper solution. Data properties should be instance properties usually. If you want to put them on the prototype, you'll have to do that explcitly in ES6:

export class Wele {
  constructor() {
    this.firstName = 'John';
    this.lastName = 'Doe';
  }

  get fullName(){
    return `${this.firstName} ${this.lastName}`;
  }

  wele(){
    alert(`Wele, ${this.fullName}!`);
  }
}
Wel.prototype.heading = 'Wele to the Aurelia Navigation App!';