Store values are undefined on react using mobx

Question

I have very simple configuration on mobx/react . I was trying to make simple store for notes like below

//modal class
class Note {
    @observable body;
    @observable date;
    @observable by;
    @observable starred;

    constructor(body, by) {
        this.body = body;
        this.date = date.now();
      this.by=by;
      this.starred=false;
    }
}


//controller class
class NoteList {
    @observable notes = [];
    @computed get StarredNote() {
        return this.notes.filter(note => note.starred).length;
    }
}


const note_store =  new NoteList();
export default note_store
console.log('here');
console.log(note_store);


note_store.notes.push(
    new Note("Note 1",'SB'),
    new Note("Note 2",'PS')
);

but I got note_store value undefined , what is wrong here?

My .babelrc

{
  "presets" : ["es2015", "react"],
  "plugins": ["transform-class-properties","transform-decorators-legacy"]
}

Answer 1

I nailed it , it was due to order of plugin

From documentation

NOTE: Order of Plugins Matters!

If you are including your plugins manually and using transform-class-properties, make sure that transform-decorators-legacy comes before transform-class-properties.

/// WRONG

"plugins": [
  "transform-class-properties",
  "transform-decorators-legacy"
]

// RIGHT

"plugins": [
  "transform-decorators-legacy",
  "transform-class-properties"
]

more https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy