extending of observable subclassing: [MobX] Options can't be provided for already observable objects

Question

When I create a deep structure with few extends I got this kind of error:

Uncaught Error: [MobX] Options can't be provided for already observable objects.

"mobx": "^6.4.2", "mobx-react-lite": "^3.3.0",

All of code is just dirty example. real structure more complex.

Code example:





import { makeObservable, observable, action } from 'mobx';

class DateMobx {
    date ;

    constructor(data) {
        this.date = new Date(data.date);
        makeObservable(this, { date: observable }, { autoBind: true });
    }
}

class Todo extends DateMobx {
    id = 0;
    title = 'title';
    text = 'text';

    constructor(todo) {
        super(todo);
        this.id  = todo.id;
        this.title  = todo.title;
        makeObservable(this, { id: observable,  title: observable, changeTitle: action }, { autoBind: true });
    }

    changeTitle= (e) => {
        const { value } = e.target;
        this.title = value;
    }
}

class TodoList {
    todo = [];

    constructor() {
        const todoData = [{ id: 1, title: 'title', date: '123' }];
        this.todo = todoData.map(item => new Todo(item)); // ERROR happen here

        makeObservable(this, { todo: observable }, { autoBind: true });
    }
}


 
Error happen in constructor of TodoList class.


if remove makeObservable from Todo class, error is not reproduced but I need reactivity in that class.


If remove extends DateMobx from Todo class error also is not reproduces (but I have a lot of general classes with basic logic where I need reactivity too).



 
Why its happen and what should I do if I really need such kind of deep structure ?

Answer 1

Guys on github bring me the right solution

Don't pass the third param ({ autoBind: true }) to makeObservable in subclasses. All options are "inherited" and can't be changed by subsequent makeObservable calls on the same object (this).

options argument can be provided only once. Passed options are "sticky" and can NOT be changed later (eg. in subclass).

https://mobx.js.org/observable-state.html#limitations