Webpack babel 6 ES6 decorators

Question

I\'ve got a project written in ES6 with webpack as my bundler. Most of the transpiling works fine, but when I try to include decorators anywhere, I get this error:

Answer 1

Installing only babel-plugin-transform-decorators-legacy didn't work for me (I have a configuration using enzyme along with karma). Turns out installing transform-class-properties: transform-class-properties and also making sure that the legacy plugin is before the transform class plugin as per the docs in transform-decorators-legacy finally made it work for me.

I'm also not using a .babelrc file, but adding this to my karma.conf.js file worked for me:

babelPreprocessor: {
  options: {
    presets: ['airbnb', 'es2015', 'stage-0', 'react'],
    plugins: ["transform-decorators-legacy", "transform-class-properties"]
  }
}

I also added it to my loaders:

loaders: [
  {
    test: /\.js$/,
    loader: 'babel',
    exclude: path.resolve(__dirname, 'node_modules'),
    query: {
      presets: ['airbnb', 'es2015', 'stage-0', 'react'],
      plugins: ["transform-decorators-legacy", "transform-class-properties"]
    }
  },

Answer 2

If you upgraded your project from Babel 6 to Babel 7, then you want to install @babel/plugin-proposal-decorators.

If you want to support legacy decorators as used in Babel 5, you need to configure your .babelrc as follows:

plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
]

Ensure @babel/plugin-proposal-decorators comes before @babel/plugin-proposal-class-properties in the case that you are making use of the latter.

Answer 3

This Babel plugin worked for me:

https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy

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

.babelrc

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    ["transform-decorators-legacy"],
    // ...
  ]
}

or

Webpack

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    plugins: ['transform-decorators-legacy' ],
    presets: ['es2015', 'stage-0', 'react']
  }
}

---

React Native

With react-native you must use the babel-preset-react-native-stage-0 plugin instead.

npm i --save babel-preset-react-native-stage-0

.babelrc

{
  "presets": ["react-native-stage-0/decorator-support"]
}

Please see this question and answer for a complete explanation.

Answer 4

You just need a transform decorators plugin: http://babeljs.io/docs/plugins/transform-decorators/

Answer 5

After spending 5 minutes on the babeljs slack webchat, I found out that decorators are broken in the current version of babel (v6.2). The only solution seems to be to downgrade to 5.8 at this time.

It would also seem they moved their issue tracker from github to https://phabricator.babeljs.io

I write all this down, since after hours of searching I have found the current documentation very poor and lacking.