Mobx: @observable store values not applying? "undefined"

[colshacol]

Very basic setup. Chrome console logs out undefined for the two observables, and for the basic user log, I get an empty object. What am I missing here? I have both mobx and mobx-react installed. No issues with using @observer in my components, except that the values come into the components as undefined.

import { autorun, observable } from 'mobx'

class UserStore {
  @observable userName = "tommy" // no workie!
  @observable arr = [0,1] // no workie!
}

const user = window.user = new UserStore

export default user;

// user.userName = "tommyyy" // works. Not observable.

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

[colshacol]

I've found this to work with the create-react-app scaffold, although inconvenient.

Store file:

import { autorun, observable } from 'mobx'

class UserStore {
  loggedIn = observable(false)
  userName = observable('timmy')
}

var store = window.store = new UserStore

export default store

autorun(( ) => {
  console.log(store.loggedIn.value);
  console.log(store.userName.value);
})

And a component file:

import React, { Component } from 'react'
import { browserHistory, Link } from 'react-router'
import { observer } from 'mobx-react'
import axios from 'axios'
import style from './FrameView.css'

export default observer(class FrameView extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="FrameView">
        {user.userName.value}
      </div>
    );
  }
})

[andykog]

@colshacol, could you share you initial .babelrc? I suspect, this is the same misconfiguration as in #560

[pierre-H]

I've got the same problem with react-scripts-ts ...

[pierre-H]

@colshacol did you solve the problem ? Thanks !

[andykog]

@pierre-H, could you collaborate on reproducing the issue?

[pierre-H]

@andykog here is my code :
https://gist.github.com/pierre-H/bfe98029650799013953903352e8ff4d

[pierre-H]

@andykog the bug is in UserStore.tsx line 12 and strangly the line 18 of Login.tsx works ...

[andykog]

@pierre-H, you are passing unbounded class method as onClick callback, you should read about context in javascript. Here is the first article on the subject i've found https://ponyfoo.com/articles/binding-methods-to-class-instance-objects

with this change your example works fine for me:

- onClick={this.props.user.login}
+ onClick={() => this.props.user.login()}

[andykog]

I suppose the issue can be closed as there are not problems related to mobX discovered.

[pierre-H]

@andykog Yes, thank you for your help !