Search code examples
typescriptannotationsmobxparceljs

MobX: Action-annotated method is undefined

I'm having a strange issue with the MobX annotations, where a method annotated @action doesn't exist on the resultant object.

If my class source is the following TypeScript (as a minimal example):

export class Car {
    @observable
    public wheels: number = 4;

    @action
    public selfDestruct() {
        this.wheels = 0;
    }
}

And I invoke the method as follows:

const car = new Car();
car.selfDestruct();

I get an error:

Uncaught TypeError: car.selfDestruct is not a function

Evaluating car.selfDestruct() in the console returns undefined.

However, if I use the action function all seems fine:

export class Car {
    @observable
    public wheels: number = 4;

    public selfDestruct = action(
        () => this.wheels = 0
    );
}

const car = new Car();

car.selfDestruct(); // works fine

For reference, I am using MobX 5.5.2 with TypeScript 3.1.1. The compilation is being handled by ParcelJS 1.10.1

Solution

  • The cause turned out to be with our tsconfig setup - we had a root config and several child configs, and it seemed the interplay of compiler options between them mangled the output somehow.

    Full details of the problem are documented in a MobX GitHub issue here. Our fix was to merely use one unified tsconfig for our entire project.