mobx @inject не создает новый (оформленный) компонент

Question

Я пытаюсь настроить приложение React, используя mobx для управления состоянием.

Я определил хранилище примерно так:

ApplicationStore.js

import { observable, action, reaction } from 'mobx';

class ApplicationStore {

  @observable appName = 'App';
  @observable currentRoute = '/';
  @observable appLoaded = false;

  @action setAppLoaded() {
      this.appLoaded = true;
  }
}

export default new ApplicationStore();

Использование его в Root.js для сбора инструментов хранения / отладки и передачи его в основной компонент приложения:

Root.js

import React, { Component } from 'react';

import { Provider } from 'mobx-react';

import App from './App.js';

import './Root.css';

import ApplicationStore from './stores/ApplicationStore';

const stores = { ApplicationStore }

class Root extends Component {
  render() {
    return (
      <Provider {...stores}>
        <App />
      </Provider>
    );
  }
}

export default Root;

App.js

import React, { Component } from 'react';

import Login from './views/login/Login'
import Dashboard from './views/dashboard/Dashboard'

import { observer, inject } from 'mobx-react';

import { Switch, Route, BrowserRouter, Redirect } from 'react-router-dom'

@inject('ApplicationStore')
@observer
class App extends Component {

    componentDidMount() {
        console.log(this.props)
    };

   render() {

    var loggedIn = false;        

    return (
      <div className="App">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" render={() => (
              loggedIn ? (
                <Redirect to="/dashboard" />
              ) : (
                <Redirect to="/login" />
              )
              )} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/dashboard" component={Dashboard} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

console.log(this.props) в componentDidMount() показывает, что есть пустые реквизиты.

Кроме того, проверка дочерних элементов <Provider> в React-dev-tools показывает, что @inject не создает новый компонент (вместо <inject-App-with-ApplicationStore> отображается <App>. *)1031 *

Я не понимаю, даааааа и

Answer 1

Проблема была с конфигом babel.Я использую подход react-app-rewired для добавления функциональности декоратора к create-react-app , который можно увидеть здесь ...

В файле config-overrides.js, который у меня был:

const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) {

    config = injectBabelPlugin(['@babel/plugin-proposal-decorators', {decoratorsBeforeExport: false}], config);

    return config;
} 

Я изменил его на:

...
     config = injectBabelPlugin(['@babel/plugin-proposal-decorators', {"legacy": true}], config);
...

и теперь он работает как положено.