Unexpected token at @ error in Aurelia module

Question

When I run an Aurelia app, I get the following error in Chrome. I get the error wherever I have @. For example, @customElement and @bindable gives the error.

My config.js looks like below:

System.config({
  "baseURL": "/",
  "transpiler": "babel",
  "babelOptions": {
    "optional": [
      "runtime"
    ]
  },
  "paths": {
    "*": "*.js",
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js"
  }
});

Answer 1

@customElement and @bindable are called decorators which is an experimental feature in JavaScript ES7, so it is currently not supported by the browsers.

However babel can also transpile this feature back to ES5 which is then can be executed by the common browsers

You just need to configure this feature in babel with using the es7.decorators option:

  "babelOptions": {
    "optional": [
      "es7.decorators",
      "runtime"
    ]
  },

You can always check the Aurelia navigation skeleton as a reference for the config.js or other setup options.