App works, but DevTools gives error "TypeError: this.todos is undefined"

[darkdark87]

The setup is simple. React with MobX and TypeScript along with MobX DevTools. The app is pretty much a copy paste of the 10 min todo introduction of MobX. The app works, but once I try to inspect the content of my store with DevTools I receive an error:

The code for the store is as follows:

export default class ObservableTodoStore {
    @observable 
    todos: any[] = [];
    @observable 
    pendingRequests: number = 0;

    constructor() {
        autorun(() => console.log(this.report));
    }

    @computed 
    get completedTodosCount() {
        return this.todos.filter(
            (todo: any) => todo.completed === true
        ).length;
    }

    @computed 
    get report() {
        if (this.todos.length === 0) {
            return '<none>';
        }
        return `Next todo: "${this.todos[0].task}". ` +
            `Progress: ${this.completedTodosCount}/${this.todos.length}`;
    }

    @action
    addTodo(task: any) {
        this.todos.push({
            task: task,
            completed: false,
            assignee: null
        });
    }
}

[tonycaputome]

I have the same problem everytime when I try to inspect the store.

[tonycaputome]

I solved the issue, my problem was using utility functions of an observable array ( toJS, slice() ...) in a computed property

class Store {
@observable users;

// init the observable in the constructor
constructor() {
  this.users = observable.array([]);
}

// some actions here that mutate your observable ...

// generate a console error
@computed get users() {
   return this.users.slice(); // or toJS()
}

// works
@computed get users() {
   return this.users;
}

}

[mweststrate]

Hard to say anything useful about this one without a reproduction project