8

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

Danila
  • 15,606
  • 2
  • 35
  • 67
Rupa_Sri
  • 81
  • 1
  • 2

1 Answers1

14

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 = 0

    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

Danila
  • 15,606
  • 2
  • 35
  • 67
  • Even after changing from decorate to makeAutoObservable getting error "[MobX] 'makeAutoObservable' can only be used for classes that don't have a superclass" My code : import { observable, action, makeAutoObservable } from "mobx"; class ConversionsStore { conversions = []; setConversions(conversions) { this.conversions = conversions; } } ConversionsStore = makeAutoObservable(ConversionsStore, { conversions: observable, setConversions: action }); export { ConversionsStore }; – Rupa_Sri Oct 20 '20 at 13:39
  • 1
    As I said in the answer you need to do it in the constructor of the targeted class – Danila Oct 20 '20 at 13:44