Декораторы MobX не работают

У меня проблемы с тем, чтобы декораторы, такие как @observable и @computed, работали в моем проекте.

Вот мои файлы.

package.json:

{
  "name": "heroku-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-plugin-syntax-decorators": "^6.13.0",
    "mobx": "^3.1.11",
    "mobx-react": "^4.2.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-1": "^6.24.1",
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

App.js:

import React, { Component } from 'react';
import './App.css';
import GameBoard from './components/game-board';
import { inject, observer } from 'mobx-react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
        </div>
        <GameBoard />
      </div>
    );
  }
}

export default App;

.babelrc:

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

Когда я добавляю декоратор @observer таким образом (@observer class App extends Component {...}) перед объявлением моего класса, я получаю эту ошибку:

Failed to compile
./src/App.js
Syntax error: Unexpected token (7:0)

   5 | import { inject, observer } from 'mobx-react';
   6 | 
>  7 | @observer class App extends Component {
     | ^
   8 |   render() {
   9 |     return (
  10 |       <div className="App">

react-native reactjs javascript mobx mobx-react
person Nick White    schedule 04.06.2017    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Похоже, вы используете create-react-app и не сделали eject . Для того, чтобы использовать декораторы, вы должны это сделать. Или используйте в качестве альтернативы custom-response-scripts.

person farwayer    schedule 04.06.2017

arrow_upward
0
arrow_downward

Правильный способ установки mobx при использовании create-react-app следующий:

  1. create-react-app ExampleApp
  2. npm run eject
  3. npm install --saveDev babel-plugin-transform-decorators-legacy
  4. Обновите файл .babelrc, как сейчас (с помощью transform-decorators-legacy)
  5. npm install --save mobx mobx-react

Это должно делать свое дело.

person H. Tugkan Kibar    schedule 04.06.2017

arrow_upward
0
arrow_downward

В моем случае я не использую stage-1, но у меня есть следующие плагины

"plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]

и эти зависимости в package.json

"babel": "^6.23.0",
"babel-loader": "^7.1.2",

И когда вы пробуете разные конфигурации, убедитесь, что папка public / packs очищена. У меня проблемы с кешированными файлами.

person s1mpl3    schedule 31.03.2018