Question

58

Webpack babel 6 ES6 decorators

rated 0 times [ 64] [ 6] / answers: 1 / hits: 39645 / 9 Years ago, thu, november 19, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

destanyb

Add To Favorites

Follow

Total Points: 407

Total Questions: 88

Total Answers: 88

Location: Senegal

Member since Mon, Sep 5, 2022

2 Years ago

answered 9 Years ago tobyl · Accepted Answer

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.