Mobx computed decorator not support decorators stage 2 proposal

[WUSO01]

Using babel7 and mobx6, Babel's config:

  "plugins": [
    ["@babel/plugin-proposal-decorators", {
        "decoratorsBeforeExport": true
    }],
    ["@babel/plugin-proposal-class-properties", {
        "loose": true
    }]
  ]

Mini demo:

import { customElement, html } from 'lit-element'
import { MobxLitElement } from '@adobe/lit-mobx'
import { observable, action, computed } from 'mobx'

class Counter {
  @observable
  public count = 1

  @computed
  get doubleCount () {
    return this.count * 2
  }

  @action
  public increment() {
    this.count++
  }
}

const counter = new Counter()

@customElement('custom-container')
class CustomContainer extends MobxLitElement {
  private store = counter

  public render() {
    return html`
      <p>Count is: ${this.store.count}</p>
      <p>MaxCount is: ${this.store.doubleCount}</p>
    `
  }
}

Intended outcome:

The count should be equal 1, doubleCount equal 2

Actual outcome:

Got error:

If i remove computed decorator' s code, or don't remove computed, change decoratorsBeforeExport to legacy, This error won't be show again.

Why I just don't change decoratorsBeforeExport to legacy, Because use legacy will cause another problem.

How to reproduce the issue:

I putted this demo on Github branch "mobx"

Versions
mobx: V6.0.4

babel: V7

[iChenLei]

Migration guide documention is helpful for you.

👉 https://mobx.js.org/migrating-from-4-or-5.html#getting-started

4. For babel users:

• If you are using Babel and have class-properties enabled, disable the legacy loose field support: ["@babel/plugin-proposal-class-properties", { "loose": false }]
• (Optional) In MobX 6 decorators have become opt-in. If you no longer wish to use decorators, remove plugin-proposal-decorators from your babel configuration and dependencies. Check out the Enabling decorators {🚀} section for more details.

Unfortunately mobx6 user must set loose false

  "plugins": [
    ["@babel/plugin-proposal-decorators", {
        "decoratorsBeforeExport": true
    }],
    ["@babel/plugin-proposal-class-properties", {
-        "loose": true
+        "loose":false
    }]
  ]

[WUSO01]

@iChenLei I tried, but it didn't work

[iChenLei]

@WUSO01 Mobx author Michel Weststrate's comment #1928 (comment), so you are right

Mobx decorator not support decorators stage 2 proposal ✔️

Optional solution

use class + makeObservable(or makeAutoObservable)

https://mobx.js.org/observable-state.html 👈🏻 get more info

-import { observable, action, computed } from 'mobx'
+import { makeObservable, observable, action, computed } from "mobx"
-class Counter {
-  @observable
-  public count = 1
-  @computed
-  get doubleCount () {
-    return this.count * 2
-  }
-  @action
-  public increment() {
-    this.count++
-  }
-}
+class Counter {
+    count: number;
+    constructor(value?: number) {
+        makeObservable(this, {
+            count: observable,
+            doubleCount: computed,
+            increment: action
+        })
+        this.count = value ?? 1;
+    }
+    get doubleCount() {
+        return this.count * 2
+    }
+    increment() {
+        this.count++
+    }
+}

Work as expected and no error in console.

I clone your repo and run it.

Stackoverflow discussion, error msg same with this issue.

Summary

Not only mobx negative with decorators , Vue and more superstar JS project also. I think only decorators become standrad ecmascript spec(stage 4), these project will face up to decorators support. ( just myself opinion

[mweststrate]

Stage 2 decorators proposal has been killed, and never got closely as popular as typescript / legacy decorators, and won't be supported by MobX indeed. Decorator usage is optional mobx and it is recommended to use makeObservable instead. The correct configuration for decorators with babel is documented here: https://mobx.js.org/enabling-decorators.html#babel-7