Is there a reason override doesn't support flow.bound?

[danawillow]

In our codebase, we have a handful of actions that call async (data fetching) functions, await the response, and store it in a property on the class. We were using flow functions for this, since it keeps the code nice and concise compared to await + runInAction, as per https://mobx.js.org/actions.html#using-flow-instead-of-async--await-.

However, we also use subclassing, and one of our subclasses was extended to override a flow method. This gave us a hard-to-debug error message:

TypeError: Cannot delete property 'populateSupervisionOfficerOutcomes' of #<Jc>
  at _proto.delete_(../../../../node_modules/mobx/dist/mobx.esm.js:5790:29)
  at _proto.defineProperty_(../../../../node_modules/mobx/dist/mobx.esm.js:5573:32)
  at extend_$1(../../../../node_modules/mobx/dist/mobx.esm.js:743:14)
  at make_$1(../../../../node_modules/mobx/dist/mobx.esm.js:709:17)
  at make_$5(../../../../node_modules/mobx/dist/mobx.esm.js:1006:29)
  at _proto.make_(../../../../node_modules/mobx/dist/mobx.esm.js:5506:34)
  at <anonymous>(../../../../node_modules/mobx/dist/mobx.esm.js:3888:18)
  at Array.forEach(<anonymous>)
  at makeObservable(../../../../node_modules/mobx/dist/mobx.esm.js:3887:26)
...

Thankfully, after looking at the subclassing docs at https://mobx.js.org/subclassing.html#limitations, we realized override isn't supported by flow.bound, and we were able to fix the issue by changing it to use await + runInAction. Why is that action, action.bound, and flow are supported but not flow.bound?

[urugator]

I think it's supposed to work, there is a test for it:
https://github.com/mobxjs/mobx/blob/main/packages/mobx/__tests__/v5/base/make-observable.ts#L1113-L1122

Do you use annotations or experimental decorators or ES decorators?

[danawillow]

Oh weird! We use annotations. It looks like that test doesn't have the override annotation set on the child, could that be the difference? Ours looks something like this:

export abstract class Parent { 
  constructor() {
    makeObservable<Parent, "myBoundFlowMethod">(
      this,
      {
        myBoundFlowMethod: true,
      },
      { autoBind: true },
    );
  }

  protected *myBoundFlowMethod(): {
    // do stuff
  }
}

export class Child extends Parent {
  constructor() {
    super();

    makeObservable<Child, "myBoundFlowMethod">(
      this,
      {
        myBoundFlowMethod: override,
      }
    );
  }
  
  protected *myBoundFlowMethod(): {
    // do stuff
  }
}

[urugator]

override shouldn't matter, it just checks the property was annotated in parent, otherwise should be noop.
In fact you can completely omit the makeObservable call in the subclass unless the subclass introduces new fields that needs to be annotated (as you can see in the test). I am not suggesting it as a solution, but it may help identifying the problem.
populateSupervisionOfficerOutcomes is the name of the flow method I assume?

[danawillow]

In this case, the subclass does introduce new fields/methods that need to be annotated. Just to see what would happen, I removed the override annotation from the flow methods in the call to makeObservable in the subclass, and I still got the original error message. So it's good to know that the override annotation itself is not what's causing this.

Yes, populateSupervisionOfficerOutcomes is the name of the flow method.