mobx + react unexpected token

Question

so i created an app with react without configuration from https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

I installed mobx and mobx-react ,but is still shows the error of unexpected token before @ symb.

Do I need to add something else, or my current configuration is wrong ?:(

package.json

"devDependencies": {
"react-scripts": "0.8.4",
"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"
},
"dependencies": {
"autobind-decorator": "^1.3.4",
"classnames": "^2.2.5",
"lodash": "^4.15.0",
"mobx": "^2.5.1",
"mobx-react": "^3.5.5",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"validator": "^5.6.0"
 },

.babelrc

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

And the code

import React, { Component } from 'react';
import { action, observable } from 'mobx'
import {observer} from 'mobx-react';


class App {
    @observer cake = [];
}

export default new App();

`@observer` is the decorator used for your React components. If you want observable data, you should use the decorator `@observable`. — Tholle, Dec 14 '16 at 09:09
Whatever i use, when i use @ symb it stops right there. So I think that mobx is not installed properly — Elīna Legzdiņa, Dec 14 '16 at 09:26
Oh, I misunderstood. I think it is because create-react-app does not support decorators (`@`) at all. I don't think MobX is the culprit here. You could try the [**mobx-react-boilerplate**](https://github.com/mobxjs/mobx-react-boilerplate) instead. — Tholle, Dec 14 '16 at 09:29

Tholle · Accepted Answer · 2017-08-21T07:01:14.897

17

create-react-app does not support decorators (@). You could either eject create-react-app to add it yourself, set up your own environment from scratch, or use something like mobx-react-boilerplate as your starting point.

I have personally used react-app-rewired with the mobx extension with great success.

edited Aug 21 '17 at 07:01

answered Dec 14 '16 at 10:07

Tholle

83,208
13
152
148

I built a starter kit with CRNA that if used with nodejs 6.0 works perfectly with decorator, the project documentation for it is available at https://wcandillon.github.io/react-native-do-documentation/docs/ – wcandillon Jun 19 '17 at 14:16

score 9 · Answer 2 · edited Feb 26 '18 at 01:54

9

You are missing packages after running npm run eject (as create-react-app does not support decorators).

Run npm install --save-dev babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties

Then add the following Babel configuration to your package.json

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

edited Feb 26 '18 at 01:54

DalSoft

9,073
3
33
47

answered Jan 23 '18 at 22:37

XPX-Gloom

561
4
11

I think you're supposed to add `transform-class-properties` to the Babel plugins array as well. – Design by Adrian Mar 03 '18 at 19:28

mwarger · Answer 3 · 2017-01-25T19:47:22.860

6

You could use the syntax provided that doesn't use decorators (here and here).

Here's an example using the App class code you provided:

import React, { Component } from 'react';
import { action, extendObservable } from 'mobx'
import {observer} from 'mobx-react';


class App {
  constructor() {
    extendObservable(this, {
      cake = [],
    }); 
  }
}

export default new App();

edited Jan 25 '17 at 19:47

answered Jan 17 '17 at 23:06

mwarger

651
6
6

mobx + react unexpected token

3 Answers3