React / MobX: Store values are undefined?

Question

My MobX autorun function logs out undefined for both of the values here. Also, in my components that import user from '../../stores/UserStore, the instances that I use {user.userName} all show nothing at all.

import { observable, autorun } from 'mobx'

class UserStore {
  @observable userName = "tommy";
  @observable arr = [0,1]
}

const user = window.user = new UserStore

export default user;


// user.userName = "timmy"; // works, but not observable.

autorun(() => {
  console.log(user.userName) // undefined
  console.log(user.arr) // undefined
})

Answer 1

If you want to use decorators with create-react-app you will need to eject the app. "Running npm run eject copies all the configuration files and the transitive dependencies." https://github.com/facebookincubator/create-react-app Also I found you need to put transform-decorators-legacy plugin first like so:

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

After you do all this. The following will work and has been tested.

@observer class Counter extends React.Component {
    @observable count = 0
}

Answer 2

Just moving the following to the top of the plugins array in the babel.config.js file solved the problem for me.

["@babel/plugin-proposal-decorators", { legacy: true }],
["@babel/plugin-proposal-class-properties", { loose: true }],