mobx 5 to 6 migration

[TonyJOM]

Hey! I am in the process of migrating from mobx v5 to v6.

I have noticed a few things that have changed that I could not find information on in the migration guide. I wanted to bring up these points because I was confused by the change of behavior from mobx v5.

1.
Observable state is lost in a variable if not initialized in mobx v6 but worked perfectly fine before in mobx v5. No error message is given. I have provided an example below.

class Example {
    /**
     * "showing" has observable state in mobx v5 but
     * loses the observable state in mobx v6. This also
     * does not trigger an error message when using 
     * npx mobx-undecorate --keepDecorators.
     */
    @observable showing?: boolean

    /**
     * "showing" regains observable state once the variable
     * has been in initialized.
     */
    @observable showing?: boolean = false
}

2.
Going off of the first example which used npx mobx-undecorate --keepDecorators, in the second example npx mobx-undecorate is used. In this example, I receive an error message unlike the first example, [MobX] Cannot apply 'observable' to '[email protected]' Field not found., when arguably the field is there. I have provided an example below.

class Example {
    /**
     * "showing has not been initialized and triggers 
     * an error message only when running npx mobx-undecorate"
     */
    showing?: boolean

  constructor() {
    makeObservable(this, {
      showing: observable,
      showStatus: computed
    })
  }

  get showStatus(): boolean | undefined {
    return this.showing
  }
}

The reason I bring up these two examples is because I would like to figure out the reason for these changes in mobx v6 when they were working fine in mobx v5? I tried to look around the migration guide to see if there was any mention of these changes, but I wasn't able to find anything. This might be worth adding to the migration guide or somewhere in your docs.

[kubk]

Hi @TonyJOM ! Please check that your transpiler is configured correctly: https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties

There is a one-line script to check. For TS you'll probably have to set "useDefineForClassFields": true

[TonyJOM]

@kubk Thank you for sharing that link. I forgot to mention it in my original post, that I have set "useDefineForClassFields" to true in my tsconfig. The point I was trying to bring up is that in my example, an error is not displayed in that case referring to adding an initializer, but in other cases it does display the error.
Example: @observable showing: boolean(Does show an error)

I also noticed that in the installation guide you posted, it does state that if a class fields is not initialized than it will lose its observable state. This was something I did not notice, since I was migrating from mobx v5 to v6. I would think this should also be mentioned in the migration guide for people coming over from mobx v4/5 that are used to not having to initialize a class field to retain its observable state. What do you think?

[urugator]

I would think this should also be mentioned in the migration guide for people coming over from mobx v4/5 that are used to not having to initialize a class field to retain its observable state. What do you think?

You don't have to initialize class fields, but you have to configure your transpiler correctly, which is already mentioned in migration guide (Getting started point 4 and 5).

No error message is given

Because with --keeDecorators the code transpiled with wrong configuration looks like this:

class Example {
  constructor() {
    makeObservable(this)
  }	
}

The fields are completely removed from the resulting code including our decorator, makeObservable has no clue about showing field, therefore it can't warn.
While without --keeDecorators it looks like this:

class Example {   
  constructor() {
    makeObservable(this, {
      showing: observable,      
    })
  }
}

Since the field name is passed to makeObservable as arg, it can warn if the field doesn't exist on the instance.