Visual Studio thinks there is a Syntax Error, but there isn't

Question

I am building a website using Aurelia within Visual Studio, it has the babel transpiler and my config file looks as follows

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

Visual Studio is reporting an error. Expected ';' on line 4. However this seems to be the correct syntax, the app.js works, and I can browse to the app.html without any issues in the console. Here is the offending code.

export class App {
    message = "Hello Aurelia";

    configureRouter(config, router) { /// <--- Expected ';'
        this.router = router;
        config.title = 'Aurelia';
        config.map([
          { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
        ]);
    };
};

If i try to use the more standard javascript lines

let configureRouter = function(config, router) {};

or

this.configureRouter = function(config, router) {};

Visual studio reports no issue, but Aurelia throws Error: (SystemJS) http://localhost:57366/src/app.js: Unexpected token (4:8) in the console for both above.

Any idea how to get Visual Studio to be using the same intellisense as the babel transpiler is using? Or what the issue could be?

Answer 1

I am no expert of Aurelia but I know that sometimes Visual Studio tells you that there is an error at the line X while the real error is further down in the code.

I think there is a ',' that should not be there a the end of line 8:

config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
]);

shoud probably looks like:

config.map([
      { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' }
]);

Visual Studio thinks this:

Foo({ "bar",
      "bar",
      "bar",
      "bar",
      });

is only a single line.

Answer 2

This is more of a work around than an answer. It looks like Visual Studio does not support the module piece of es6. Rather than hunting down the configuration file for Visual Studio, or using a third party tool/extension, the below solution will work.

Defining the export at the end of the file instead will work.

class App {
    message = "Hello Aurelia";
    villy = "lawrence";

    configureRouter(config, router) {
        this.router = router;
        config.title = 'Aurelia';
        config.map([
          { route: ['', 'home'],       name: 'home',       moduleId: 'home/index' },
        ]);
    };
}

export { App };