reactjs mobx without decorators not working

Question

I am trying to incorporate mobx with react. Since I spawned my application using create-react-app, I can't use decorators given by mobx.

Given that we can use mobx without decorators as per this documentation: https://mobxjs.github.io/mobx/best/decorators.html

Here's a component that I created:

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

export const TestComponent = observer(class TestComponent extends Component {

  render() {
     return <div>Just a test component!</div>
  }

});

Here's a simple calling of the above component:

import React, { Component } from 'react';

import './App.css';

import Auth from './Auth'
import { TestComponent } from './Test'

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import AppBar from 'material-ui/AppBar';
import  authStore  from './stores/Store'

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
    return (
        <div className="app">
            <MuiThemeProvider>
                <div>
                    <TestComponent store={authStore} />
                </div>
            </MuiThemeProvider>
        </div>

    );
  }
}

export default App;

Now when I run the above component, I get error: Uncaught TypeError: (0 , _mobxReact2.default) is not a function(…) nothing get displays in console.

What am I doing wrong here?

Answer 1

Please use import {observer} from 'mobx-react';

N.B. note that decorators can be used with create-react-app by using custom-react-scripts, as explained here)