Mobx + reacts to an unexpected token

Question

so I created an application with a reaction without configuration https://facebook.imtqy.com/react/blog/2016/07/22/create-apps-with-no-configuration.html

I installed mobx and mobx reaction, but still shows an unexpected token error before @symb.

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

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 code

 import React, { Component } from 'react'; import { action, observable } from 'mobx' import {observer} from 'mobx-react'; class App { @observer cake = []; } export default new App(); 

Answer 1

create-responsive-app does not support decorators ( @ ). You can either extract the create-react-app to add it yourself, set up your own environment from scratch, or use something like mobx-react-pattern as a starting point.

I personally used to respond to applications using the mobx extension with great success.

Answer 2

You can use syntax that does not use decorators ( here and here ).

Here is an example of using the application class code that you specified:

 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(); 

Answer 3

You are missing packages after running npm run eject (since the create-response-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" ] },