mobx - Leading decorators must be attached to a class declaration

Question

I want to use the MobX decorators, but when I try to run my code, I get the following error message:

Leading decorators must be attached to a class declaration

My application is storing data in Datastores from nedb and I want to observe them with mobx.

So for example, if I have the following code:

import { observable } from 'mobx';
import Datastore from 'nedb';

@observable projectsDb = new Datastore({
    filename: __dirname + './projects.json',
    autoload: true,
    timestampData: true,
});

export default projectsDb;

When I start my Electron App I use the following command:

"browserify -t [ babelify --presets [ react es2015 stage-1] --plugins [transform-decorators-legacy] ] app/app.jsx -o app/js/app.js && stylus app/css/styles.styl -o app/css/styles.css && electron app/main.js",

Also all devDepenendencies and Dependencies are added to my package.json.

Is there any error in my "start"-command or any misunderstanding in the concept of observable here?

Solution 1

Decorators (in general) can not be applied to variables, only to classes and properties. However, observable can also be invoked as funcion (so without the @), and then you can objects into it as well.

P.S. note that MobX does modify the internals of external libraries, so passing your entire database class to observable will not magically make your whole database lib reactive, it will just create an observable reference to the database

Solution 2

you can remove semicolon after decorator :

turn this :

@inject(CssAnimator);

to this:

@inject(CssAnimator)