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:

Decorators are not supported yet in 6.x pending proposal update.

I've looked over the babel issue tracker, and haven't been able to find anything on it there, so I'm assuming I'm using it wrong. My webpack config (the relevant bits):

loaders: [
  {
    loader: 'babel',
    exclude: /node_modules/,
    include: path.join(__dirname, 'src'),
    test: /\.jsx?$/,
    query: {
      plugins: ['transform-runtime'],
      presets: ['es2015', 'stage-0', 'react']
    }
  }
]

I have no trouble with anything else, arrow functions, destructuring all work fine, this is the only thing that doesn't work.

I know I could always downgrade to babel 5.8 where I had it working a while ago, but if there's any way to get this working in the current version (v6.2.0), it would help.

I thought since I included the stage-0 preset, that they would get transformed propery. Decorators are part of the stage-1 preset that should include the transform-decorators. As written on the babel website. — Pavlin, Nov 19 '15 at 10:36
@Pavlin I am thinking whether this could be an issue with the ordering of `presets`. — Sulthan, Nov 19 '15 at 10:37
I thought it may be that, but I tested it again. Any way I put it I get an error. Apparently the order does matter, but I don't think that's the problem here. — Pavlin, Nov 19 '15 at 11:18

score 171 · Accepted Answer · edited May 23 '17 at 12:03

171

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.

edited May 23 '17 at 12:03

Community

1
1

answered Dec 10 '15 at 19:32

Kyle Finley

11,842
6
43
64

You probably wouldn't want the plugin enabled only for `development`. – loganfsmyth Dec 15 '15 at 21:44
Thanks @loganfsmyth. I've update the answer to include `production` as well – Kyle Finley Dec 16 '15 at 05:25
1

I mean, why put it in an `env` block at all? You can have `plugins` as a sibling of `presets` – loganfsmyth Dec 16 '15 at 05:52
@loganfsmyth, ah, I didn't know that. Updated, thanks. – Kyle Finley Dec 16 '15 at 06:07
Is it on purpose that the order of presets for Webpack is different from Babelrc? (es2015 first instead of react) – Micros Feb 11 '16 at 08:48
@Micros, no the order doesn't matter. I've update the answer to avoid confusion. – Kyle Finley Feb 11 '16 at 15:18
The `babel-plugin-transform-decorators-legacy` doesn't work for me. Any updates for 2016? – reectrix Jul 25 '16 at 19:57
1

@am5255, it still seems to be working for me. Would you mind submitting an issue with the author? https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy/issues – Kyle Finley Jul 26 '16 at 00:01
1

Was finally able to get this to work. Turns out I had to install `transform-class-properties` as well https://babeljs.io/docs/plugins/transform-class-properties/ and also make sure that the legacy plugin is before the transform class plugin as per the docs in https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy – reectrix Jul 26 '16 at 15:17

score 41 · Answer 2 · answered Nov 19 '15 at 12:34

41

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.

answered Nov 19 '15 at 12:34

Pavlin

5,390
6
38
51

6

From that issue, a "best-effort with limitations" legacy plugin was made. See readme for limitations: https://www.npmjs.com/package/babel-plugin-transform-decorators-legacy – Jason Dec 07 '15 at 17:06
I can confirm that the transform decorators legacy is working for me as an interim solution. – dvlsg Dec 10 '15 at 18:50
@Pavlin, although your answer may have been correct, the plugin listed below should be the accepted answer for now. – Ajax Dec 24 '15 at 00:47

score 8 · Answer 3 · edited Aug 16 '16 at 09:41

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"]
    }
  },

Spend an hour here and there and this things worked for me. Thanks alot — cjmling, Apr 08 '18 at 13:59

score 3 · Answer 4 · answered Dec 07 '15 at 07:43

3

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

answered Dec 07 '15 at 07:43

yetone

39
3

1

Still failed for me w/ that. – amcdnl Dec 11 '15 at 20:14
3

@amcdnl my impression is that the transform decorators plugin is the official one but left unimplemented due to TC39 constraints, in the meantime there is this - https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy – Qiming Dec 22 '15 at 16:48
@Qiming yup thats what i ended up using and babel official even says that if u dig far enough .. pretty terrible idea on their part imo – amcdnl Jan 07 '16 at 18:12

score 1 · Answer 5 · answered Jul 18 '19 at 05:36

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.

Webpack babel 6 ES6 decorators

5 Answers5

.babelrc

Webpack

React Native

.babelrc

Linked

Related