Aurelia / ES6 class and property definition, plumber syntax error

Question

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 Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

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

  welcome(){
    alert(`Welcome, ${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 Welcome {
> 2 |   heading = 'Welcome 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

Answer 1

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 Welcome {
  heading = 'Welcome to the Aurelia Navigation App!';
  firstName = 'John';
  lastName = 'Doe';

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

  welcome(){
    alert(`Welcome, ${this.fullName}!`);
  }
}