How do I get decorators to work with babel & webpack?

Question

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

Since then I upgraded to Babel 6 and now has the following setting:

 { "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 we get a Parsing error: Unexpected token ILLEGAL , referring to the decorator.

Answer 1

After some searching and this SO answer , I was able to get it working without using the .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'] } } ]