Not able to import decorate from mobx

Question

Attempted import error: 'decorate' is not exported from 'mobx'. My mobx version is 6.0, I tried to change the package from mobx to mobx-react, mobx-react-lite,mobx-decorate.But still couldn't resolve it.

Thanks in advance

Screenshot

Answer 1

The decorate API has been removed in MobX 6, and needs to be replaced by makeObservable in the constructor of the targeted class. It accepts the same arguments.

Example:

import { makeObservable, observable, computed, action } from "mobx"

class Doubler {
    value

    constructor(value) {
        makeObservable(this, {
            value: observable,
            double: computed,
            increment: action
        })
        this.value = value
    }

    get double() {
        return this.value * 2
    }

    increment() {
        this.value++
    }
}

There is also new thing makeAutoObservable, you don't even need to use decorators with it:

import { makeAutoObservable } from "mobx"

class Timer {
    // You don't even need to use decorators anymore
    // property automatically becomes observable
    secondsPassed = 0

    constructor() {
        // Call it here
        makeAutoObservable(this)
    }

    // And this one automatically becomes an action
    increaseTimer() {
        this.secondsPassed += 1
    }
}

More info here:

https://mobx.js.org/react-integration.html

https://mobx.js.org/migrating-from-4-or-5.html