babeljs - 添加计算装饰器会导致 TypeError

Question

我无法使用@compulated。如果我运行下面的代码，我会收到错误:

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)

这是我的 UserStore.js 文件:

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;

如果我删除@compulated，应用程序就会加载。

Answer 1

我的错误原因是 Babel 7 的 .babelrc 配置不正确。

失败

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [ "@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true } ],
    "transform-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

工作

{
  "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"
  ]
}