Babel transpiling es7 class decorators Unexpected token error

Question

im working on an Aurelia app that used es6 and es7 code, im trying to transpile the code using babel. I have the following in my packages.json file

"scripts": {
    "babel": "babel --stage 1 -d AureliaWeb/ ../Test/Aurelia/ --extends babelrc",

I have the following packages installed:

"devDependencies": {
"babel-core": "^6.10.4",
"babel-plugin-syntax-decorators": "^6.8.0",
"babel-plugin-syntax-flow": "^6.8.0",
"babel-plugin-transform-es2015-modules-amd": "^6.8.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
"babel-plugin-transform-es2015-modules-systemjs": "^6.9.0",
"babel-plugin-transform-flow-strip-types": "^6.8.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-es2015-loose": "^7.0.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"babel-preset-stage-2": "^6.11.0",
"babel-preset-stage-3": "^6.11.0",
"babel-register": "^6.9.0",
"chai": "^3.5.0"
},
"dependencies": {
"babel-plugin-transform-class-properties": "^6.10.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015-loose": "^7.0.0",
"core-js": "^2.4.0",
"lodash": "^4.13.1"
}

Im trying to transpile es7 code looking like:

import {inject, noView} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@noView() <-- THIS IS CAUSING THE ERROR!!
@inject(HttpClient)
export class CompanyDataManager {

Im getting the error Syntax error Unexpected token arount the class decorator @noView. I have checked the stage 1 preset and i know that class decorators have been removed http://babeljs.io/docs/plugins/preset-stage-1/

Due to this I have added in the legacy decorator 'babel-plugin-transform-decorators-legacy found here 'https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

so my .babelrc (which is located at the root of my project) looks like so:

{
  "presets": [ "es2015-loose", "stage-1" ],
  "plugins": [
    "syntax-decorators",
    "syntax-flow",
    "babel-plugin-transform-decorators-legacy",
    "transform-class-properties",
    "transform-flow-strip-types"
  ]
}   

However im still finding no joy! Question is

1. How can i confirm that my babelrc file is being picked up when im executing the babel script in npm? I tried adding --extends babelrc in an attempt to force it, but im not sure if this is correct.

2. I have also tried specifying a plugin in the babel command like so:

   "babel --plugins babel-plugin-transform-decorators-legacy --stage 1 -d AureliaWeb/ ../Test/Aurelia/"

Still no luck, any help would be greatly appreciated.

Update 1

After messing around with the .bablerc file, i think i might have placed it in the wrong location. My structure is as follows (its an mvc app).

• Test.UnitTest (Project) <-- i am running the babel script from here
  • AureliaWeb <-- end trandpiled location
• Test (Project)
  • Aurelia <-- contains actual Aurelia code

After having moved the .bablerc file into Test > Aurelia I started getting the following error

Unknown plugin "transform-decorators-legacy" specified in "C:\Code\src\Test\Aurelia\.babelrc" at 0, attempted to resolve relative to "C:\Code\src\Test\Aurelia"

I have tried installing the package for transform-decorators-legacy in both projects to see if it makes any difference

Update 2

I can now confirm that this was in fact the issue, it appears that the babel file needs to be placed in the source folder, not destination or the location from which babel has been executed.

Answer 1

I believe you just need to remove the parentheses:

@noView
@inject(HttpClient)
export class CompanyDataManager {

See, for example, point 2 under "Best Effort":

class Example {
    @dec
    static prop = i++;
}

______

Note: when you declare a babel plugin in your .babelrc (or package.json) you can drop the prefix babel-plugin-:

[
  "syntax-decorators",
  "syntax-flow",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types"
]

______

How can i confirm that my babelrc file is being picked up when im executing the babel script

Babel looks in the directory in which it was invoked for either a .babelrc or package.json with "babel" property. So long as you have either of these and are executing Babel in the same directory, Babel will find it.