Adding computed decorator causes a TypeError - babeljs

Question

I can't use #computed. If I run my code bellow I get an error:
Uncaught TypeError: An element descriptor's .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "undefined"
at _toElementDescriptor (app.js:46281)
at _toElementFinisherExtras (app.js:46283)
at _decorateElement (app.js:46273)
at app.js:46269
at Array.forEach (<anonymous>)
at _decorateClass (app.js:46269)
at _decorate (app.js:46251)
at Module../src/App/stores/UserStore.js (app.js:46301)
at __webpack_require__ (bootstrap:19)
at Module../src/App/stores/index.js (index.js:1)
And here is my UserStore.js file:
import {
configure,
runInAction,
observable,
action,
computed
} from 'mobx'
import API from '../api'
configure({ enforceActions: 'observed' })
class UserStore {
#observable users
#observable state
#observable currPage
#observable hasMore
#observable errors
constructor() {
this.users = []
this.state = 'loading'
this.currPage = 0
this.hasMore = true
this.errors = []
}
#action
addUser = (user) => {
this.users.shift(user)
}
#action
addUsers = (users) => {
this.users = this.users.concat(users)
}
#action
async fetchUsers () {
let req;
try {
req = await API.allUsers()
runInAction(() => {
this.state = 'done'
this.addUsers(req.body.users || [])
this.hasMore = (req.body.users && req.body.users.length) ? true : false
this.currPage = this.currPage + 1
})
} catch (e) {
runInAction(() => {
this.state = 'error'
this.hasMore = false
})
}
}
#computed
get females () {
return this.users.filter(user => user.gender === 'female')
}
#computed
get males () {
return this.users.filters(user => user.gender === 'male')
}
}
const store = new UserStore();
export default store;
If I remove #computed the application loads.

Answer 1

The reason for my error was incorrect .babelrc configuration with Babel 7.
Failing
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[ "#babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true } ],
"transform-class-properties",
"#babel/plugin-transform-runtime"
]
}
Working
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
[ "#babel/plugin-proposal-decorators", { "legacy": true } ],
[ "#babel/plugin-proposal-class-properties", {
"loose": true
}],
"#babel/plugin-transform-runtime"
]
}