CODEWITHSUNDEEP
javascriptreactjsmobx
Colton Colcleasure
Colton Colcleasure

Reputation: 518

React / MobX: Store values are undefined?

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
})

Upvotes: 4

Views: 6219

Answers (2)

Pratik Infanto
Pratik Infanto

Reputation: 17

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 }],

Upvotes: 1

mbokil
mbokil

Reputation: 3340

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
}

Upvotes: 5

Related Questions