6

I have the following setup:

{
  "babel-core": "~5.8.25",
  "babel-eslint": "^4.1.3",
  "babel-loader": "~5.3.2",
  "babel-polyfill": "^6.2.0",
  "eslint": "^1.7.3",
  "eslint-config-airbnb": "^0.1.0",
  "eslint-loader": "~1.1.0",
  "eslint-plugin-angular": "~0.12.0",
  // ...
}

webpack:

module: {
  preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}],
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['ng-annotate', 'babel-loader?plugins[]=transform-decorators-legacy'],
    }
  ]
}

But I get the following error:

TypeError: The plugin "transform-decorators-legacy" didn't export a Plugin instance

Does anyone know what I'm doing wrong here?

UPDATE

I've since upgraded to Babel 6 and now have the following set up:

{
  "babel-core": "^6.0.0",
  "babel-eslint": "^4.1.3",
  "babel-loader": "^6.0.0",
  "babel-plugin-transform-decorators-legacy": "^1.3.4",
  "babel-polyfill": "^6.2.0",
  "babel-preset-es2015": "^6.0.0",
  "babel-preset-stage-0": "^6.5.0",
  "eslint": "^1.10.0",
  "eslint-config-airbnb": "^4.0.0",
  "eslint-loader": "^1.2.0",
  "eslint-plugin-angular": "^0.15.0",
  // ...
}

and:

module: {
  preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'eslint-loader'}],
  loaders: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['ng-annotate', 'babel?presets[]=es2015&presets[]=stage-0&plugins[]=transform-decorators-legacy'],
    }
  ]
},

But get Parsing error: Unexpected token ILLEGAL referring to the decorator.

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
jjenzz
  • 1,519
  • 1
  • 14
  • 19
  • I don't see `babel-plugin-transform-decorators-legacy` in your package.json - have you installed it? – CodingIntrigue Feb 08 '16 at 12:38
  • "*get ES6 decorators working*" - no way. Decorators are a feature that is proposed for ES7, not part of ES6. – Bergi Feb 08 '16 at 13:54
  • @Bergi, my bad... I meant ES7. – jjenzz Feb 08 '16 at 14:41
  • I've since upgraded to babel 6 and now getting an "Unexpected token ILLEGAL" error, referring to the decorator – jjenzz Feb 08 '16 at 14:42
  • Why not use a .babelrc file, you can specify plugins in there? :) – Herku Feb 08 '16 at 14:55
  • Does ESlint throw the parse error or babel? – Herku Feb 08 '16 at 15:02
  • @Herku, seems it was eslint and adding `"parser": "babel-eslint",` to .eslintrc fixes it. Next hurdle is getting the karma-babel-preprocessor to play nice as my tests are throwing the same error. – jjenzz Feb 08 '16 at 15:45
  • The current state of decorators is a bit frustrating. One way could be to avoid decorators until there is progress in the draft... – Herku Feb 08 '16 at 15:50

1 Answers1

2

After some searching and this SO answer, I was able to get it working without using a .babelrc file.

Install transform-decorators-legacy

npm install --save-dev babel-plugin-transform-decorators-legacy

Include the plugin in webpack.config.js

loaders: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
      plugins: ['transform-decorators-legacy'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]
Community
  • 1
  • 1
Chalise
  • 3,656
  • 1
  • 24
  • 37