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

[davidmoshal]

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

[davidmoshal]

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]

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

[mweststrate]

@kmalakoff ^ how to enable decorators in babel 6

[davidmoshal]

no problem, glad it helped
Dave

[mweststrate]

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

[daisuke-3]

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

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

[adamski]

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]

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

Op do 6 okt. 2016 om 00:04 schreef Adam Wilson [email protected]:

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
https://github.com/mobxjs/mobx/issues/105#issuecomment-251813235, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhPRMx-7HN_KZ4ZQGQK3YImyKATWnks5qxB72gaJpZM4HP53j
.

[adamski]

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

[nikitph]

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]

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

[nikitph]

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 <
[email protected]> 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
https://github.com/mobxjs/mobx/issues/105#issuecomment-256108292, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AExqB1BwM1RznCau8B3lJWaHPwIeUl-tks5q3kCmgaJpZM4HP53j
.

[mweststrate]

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

Op di 25 okt. 2016 om 21:23 schreef nikit [email protected]:

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 <
[email protected]> 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
https://github.com/mobxjs/mobx/issues/105#issuecomment-256108292, 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
https://github.com/mobxjs/mobx/issues/105#issuecomment-256149081, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABvGhPejDSqG6ZAtq2_TpeReqF3OI_UCks5q3ldAgaJpZM4HP53j
.

[DigitalMarc]

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]

@DigitalMarc afaik transform-decorators should not be needed

[DigitalMarc]

@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]

@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]

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]

@DigitalMarc ah! check: https://github.com/zeit/next.js/issues/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]

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

[wss1942]

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]

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]

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]

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]

You need babel-plugin-transform-class-properties

On Nov 15, 2017, at 08:25, chen tuo [e-mail] 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]

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]

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

[wnbupt]

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]

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]

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.