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

davidmoshal · 2016-01-30T22:02:18Z

Just tried mobservable in my project, though ran into this issue:

Module build failed: SyntaxError:
Decorators are not supported yet in 6.x pending proposal update.

  20 | 
  21 | @observer
> 22 | class TimerView extends Component {
     | ^
  23 |   render() {
  24 |     return (
  25 |       <button onClick={this.onReset}>

Here is my .babelrc:

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "env": {
    "development": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

The text was updated successfully, but these errors were encountered:

davidmoshal · 2016-01-30T22:09:58Z

found the solution:

http://technologyadvice.github.io/es7-decorators-babel6/
npm i --save-dev babel-plugin-transform-decorators-legacy

# .babelrc
{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy"]
}

mweststrate · 2016-02-01T19:05:52Z

Thanks for figuring this out! I updated the tests and will update the docs soon

mweststrate · 2016-02-01T19:13:52Z

@kmalakoff ^ how to enable decorators in babel 6

davidmoshal · 2016-02-01T19:26:26Z

no problem, glad it helped
Dave

mweststrate · 2016-04-22T09:37:32Z

As reported here: mobxjs/mobx-react#41 it appears that the order of plugins is important, make sure that transform-decorators-legacy appears first!

daisuke-3 · 2016-07-19T22:42:38Z

I have the save problem.
It works fine like this.

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

adamski · 2016-10-05T22:04:36Z

I had this come up in my react-native project, after adding a new preset to my .babelrc. Solved by switching them around:

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

mweststrate · 2016-10-06T06:24:21Z

So with this setup you don't need transform-decorators-legacy?

Op do 6 okt. 2016 om 00:04 schreef Adam Wilson notifications@github.com:

I had this come up, after adding a new preset to my .babelrc. Solved by
switching them around:

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

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
#105 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhPRMx-7HN_KZ4ZQGQK3YImyKATWnks5qxB72gaJpZM4HP53j
.

adamski · 2016-10-06T08:58:33Z

No, that's what react-native-stage-0/decorator-support does

nikitph · 2016-10-25T17:11:38Z

i have tried everything in this thread and i still get "leading decorators must be attached to a class" i m on latest everything. any suggestions? i would hate to go to redux.

mweststrate · 2016-10-25T17:47:12Z

@nikitph note that all decorators are optional! See http://mobxjs.github.io/mobx/best/decorators.html

nikitph · 2016-10-25T19:23:41Z

i know.. but i m from a java background and find decorators to be much more
intuitive and clear. And then there is the question of confidence. i know
redux to b involved and has lots of boilerplate but it has a very strong
community behind it. i have spent nearly 4 hours so far watching mobx
videos and while conceptually i find it way better, unable to get started
with the most basic of things is not inspiring me to use it in production.

On Tue, Oct 25, 2016 at 10:47 AM, Michel Weststrate <
notifications@github.com> wrote:

@nikitph https://github.com/nikitph note that all decorators are
optional! See http://mobxjs.github.io/mobx/best/decorators.html

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#105 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AExqB1BwM1RznCau8B3lJWaHPwIeUl-tks5q3kCmgaJpZM4HP53j
.

mweststrate · 2016-10-25T19:39:29Z

Can you share your setup and config files? React / react Native /
TypeScript / Babel etc

Op di 25 okt. 2016 om 21:23 schreef nikit notifications@github.com:

i know.. but i m from a java background and find decorators to be much more
intuitive and clear. And then there is the question of confidence. i know
redux to b involved and has lots of boilerplate but it has a very strong
community behind it. i have spent nearly 4 hours so far watching mobx
videos and while conceptually i find it way better, unable to get started
with the most basic of things is not inspiring me to use it in production.

On Tue, Oct 25, 2016 at 10:47 AM, Michel Weststrate <
notifications@github.com> wrote:

@nikitph https://github.com/nikitph note that all decorators are
optional! See http://mobxjs.github.io/mobx/best/decorators.html

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#105 (comment), or
mute
the thread
<
https://github.com/notifications/unsubscribe-auth/AExqB1BwM1RznCau8B3lJWaHPwIeUl-tks5q3kCmgaJpZM4HP53j

.

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
#105 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhPejDSqG6ZAtq2_TpeReqF3OI_UCks5q3ldAgaJpZM4HP53j
.

DigitalMarc · 2016-11-07T11:55:23Z

Hi guys,
Within this config:

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

For this bit of code:

@computed get completedTodosCount() {
        return this.todos.filter(
            todo => todo.completed === true
        ).length;
    }

I got this output:
Method has decorators, put the decorator plugin before the classes one.

mweststrate · 2016-11-07T12:33:05Z

@DigitalMarc afaik transform-decorators should not be needed

DigitalMarc · 2016-11-07T16:50:05Z

@mweststrate cheers, all that MobX stuff is great and I would definitely like having those decorators working.
If you have any recommendation / setup to follow to make this work, that would be great.

mweststrate · 2016-11-07T19:17:53Z

@DigitalMarc are you using react or react-native? Are you sure .babelrc is picked up at all? Sometimes it is duplicated in webpack configs etc. Did you install the corresponding babel packages? I assume you are using babel 6?

DigitalMarc · 2016-11-08T00:41:38Z

hey @mweststrate, thanks for your feedback. I'm using react, testing next.js so the problem might come from there. Babel presets are loaded for the 'package.json' file located at the root of the project structure. I've installed all the Babel package I can dream of and tested different combination.

mweststrate · 2016-11-08T07:17:56Z

@DigitalMarc ah! check: vercel/next.js#26. Edit: see you already found it. Yeah I think the issue is probably that the plugins don't get the right priority. If it is just for testing / play, you might try to modify the babelrc of next itself in your node_modules (or by creating a fork), that should give some clue whether this is indeed the issue

MarcMagnin · 2016-11-08T07:22:20Z

@mweststrate, Thanks mate, I'll give a try.
Thumbs up for the really good work.

wss1942 · 2017-08-22T16:36:29Z

Install npm i --save-dev babel-plugin-transform-decorators-legacy.
Update the package.json(I use creat-react-app and I have ejected):

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["transform-decorators-legacy"]     //++
  },

mingyuanke · 2017-09-23T16:06:37Z

if use creact-react-app,update react-scripts

{
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              // @remove-on-eject-begin
              babelrc: true, //**update false to true**
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              compact: true,
            },
          }

TamerCC · 2017-11-10T11:25:40Z

My solution was
.babelrc

{
  "presets": [
    "react",
    "es2015",
    "stage-1"
  ],
  "plugins": ["transform-decorators-legacy" /* should always be the first plugin! */]
}

webpack.config.js

module: {
    rules: [ // loader rules
      {
        test: /\.js$/, // files ending with .js
        exclude: /node_modules/, // exclude the node_modules directory
        loader: 'babel-loader', // use this (babel-core) loader
        query: {
          "presets": ["react", "env", "stage-0"],
          "plugins": ["transform-decorators-legacy"] /*  <<<< added this to the query */
        }
      },

So added
"plugins": ["transform-decorators-legacy"]
to both files

cpprookie · 2017-11-15T06:25:36Z

Hey guys, i got a problem about mobx envirnoment.
I have .babelrc file like this

{
  "presets": ["es2015"],
  "plugins": ["transform-decorators-legacy"]
}

And i intall babel-preset and babel-plugin which is needed. After test, i could use decorator in my project. But when it comes to mobx use like

import { observable } from 'mobx';
export default class Timer {
  @observable timer = 0;
}

I got output SyntaxError: index.js: Unexpected token at timer = 0, what should i do to fix it? I have knowed that decorator should work with class/function, Any extra configuration is needed whe n i want to create observable properties?

andykog · 2017-11-15T06:33:43Z

You need babel-plugin-transform-class-properties

…

On Nov 15, 2017, at 08:25, chen tuo ***@***.***> wrote: Hey guys, i got a problem about mobx envirnoment. I have .babelrc file like this { "presets": ["es2015"], "plugins": ["transform-decorators-legacy"] } And i intall babel-preset and babel-plugin which is needed. After test, i could use decorator in my project. But when it comes to mobx use like import { observable } from 'mobx'; export default class Timer { @observable timer = 0; } I got output SyntaxError: index.js: Unexpected token at timer = 0, what should i do to fix it? I have knowed that decorator should work with class/function, Any extra configuration is needed whe n i want to create observable properties? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

cpprookie · 2017-11-16T05:59:02Z

If anyone have question like me? You may need add "stage-1" in your .babelrc presets, And install related modules.You can Check es6-class-member-variable.

guanbiao33 · 2018-03-11T11:33:41Z

@cpprookie I got the same error and fixed it,thank you

wnbupt · 2018-04-12T12:06:25Z

please make sure that "babel-loader": "^7.1.1"

In Babel 7, transform-decorators-legacy will be the default plugin in Stage-0.

You can read more here

blusclips · 2018-05-14T13:20:40Z

tried to configure my .babelrc file.. for using decorators in mobx project
{
"presets": ["es2015", "stage-1"],
"plugins": ["transform-decorators-legacy"]
}

Plugin/Preset files are not allowed to export objects, only functions.

WangSongYang · 2018-08-01T03:54:11Z

I config my .babelrc files like this:
{
"preset": ["react-native", "es2015", "stage-1"],
"plugins": ["transform-decorators-legacy"]
}
but, after I run "react-native run-ios', I got this error message--"Plugin/preset files are not allowed to export objects, only functions."

Anyone can help me ? Thanks.

mweststrate added a commit that referenced this issue Feb 1, 2016

Updated tests to use babel6, see #105

f3110eb

mweststrate closed this as completed Feb 2, 2016

mweststrate mentioned this issue Apr 7, 2016

Syntax error in docs ? #176

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

davidmoshal commented Jan 30, 2016

davidmoshal commented Jan 30, 2016

mweststrate commented Feb 1, 2016

mweststrate commented Feb 1, 2016

davidmoshal commented Feb 1, 2016

mweststrate commented Apr 22, 2016 •

edited

Loading

daisuke-3 commented Jul 19, 2016

adamski commented Oct 5, 2016 •

edited

Loading

mweststrate commented Oct 6, 2016

adamski commented Oct 6, 2016

nikitph commented Oct 25, 2016

mweststrate commented Oct 25, 2016

nikitph commented Oct 25, 2016

mweststrate commented Oct 25, 2016

DigitalMarc commented Nov 7, 2016

mweststrate commented Nov 7, 2016

DigitalMarc commented Nov 7, 2016

mweststrate commented Nov 7, 2016

DigitalMarc commented Nov 8, 2016

mweststrate commented Nov 8, 2016

MarcMagnin commented Nov 8, 2016

wss1942 commented Aug 22, 2017 •

edited

Loading

mingyuanke commented Sep 23, 2017

TamerCC commented Nov 10, 2017 •

edited

Loading

cpprookie commented Nov 15, 2017

andykog commented Nov 15, 2017 via email

cpprookie commented Nov 16, 2017

guanbiao33 commented Mar 11, 2018

wnbupt commented Apr 12, 2018 •

edited

Loading

blusclips commented May 14, 2018 •

edited

Loading

WangSongYang commented Aug 1, 2018 •

edited

Loading

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

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

Comments

davidmoshal commented Jan 30, 2016

davidmoshal commented Jan 30, 2016

mweststrate commented Feb 1, 2016

mweststrate commented Feb 1, 2016

davidmoshal commented Feb 1, 2016

mweststrate commented Apr 22, 2016 • edited Loading

daisuke-3 commented Jul 19, 2016

adamski commented Oct 5, 2016 • edited Loading

mweststrate commented Oct 6, 2016

adamski commented Oct 6, 2016

nikitph commented Oct 25, 2016

mweststrate commented Oct 25, 2016

nikitph commented Oct 25, 2016

mweststrate commented Oct 25, 2016

DigitalMarc commented Nov 7, 2016

mweststrate commented Nov 7, 2016

DigitalMarc commented Nov 7, 2016

mweststrate commented Nov 7, 2016

DigitalMarc commented Nov 8, 2016

mweststrate commented Nov 8, 2016

MarcMagnin commented Nov 8, 2016

wss1942 commented Aug 22, 2017 • edited Loading

mingyuanke commented Sep 23, 2017

TamerCC commented Nov 10, 2017 • edited Loading

cpprookie commented Nov 15, 2017

andykog commented Nov 15, 2017 via email

cpprookie commented Nov 16, 2017

guanbiao33 commented Mar 11, 2018

wnbupt commented Apr 12, 2018 • edited Loading

blusclips commented May 14, 2018 • edited Loading

WangSongYang commented Aug 1, 2018 • edited Loading

mweststrate commented Apr 22, 2016 •

edited

Loading

adamski commented Oct 5, 2016 •

edited

Loading

wss1942 commented Aug 22, 2017 •

edited

Loading

TamerCC commented Nov 10, 2017 •

edited

Loading

wnbupt commented Apr 12, 2018 •

edited

Loading

blusclips commented May 14, 2018 •

edited

Loading

WangSongYang commented Aug 1, 2018 •

edited

Loading