元素描述符的 .kind 属性必须是“method"或“method".或“字段" [英] An element descriptor's .kind property must be either "method" or "field"

问题描述

我正在关注 mobx-react-router 的文档 但在尝试运行我的应用程序时，我在浏览器中收到以下错误:

I'm following the documentation for mobx-react-router but upon attempting to run my application I get the following error in the browser:

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:49988)
    at _toElementFinisherExtras (app.js:49990)
    at _decorateElement (app.js:49980)
    at app.js:49976
    at Array.forEach (<anonymous>)
    at _decorateClass (app.js:49976)
    at _decorate (app.js:49958)
    at Module../src/App/UserStore.js (app.js:50012)
    at __webpack_require__ (bootstrap:19)
    at Module../src/index.js (index.js:1)

这是我的初始化方式:

const appContainer = document.getElementById('app');
if(appContainer) {
  const browserHistory = createBrowserHistory()
  const routingStore = new RouterStore();

  const stores = {
    users: userStore,
    routing: routingStore
  }

  const history = syncHistoryWithStore(browserHistory, routingStore);

  ReactDOM.render(
    (
      <Provider {...stores}>
        <Router history={history}>
          < App />
        </Router>
      </Provider>
    ),
  appContainer);
}

这就是我的用法:

@inject('routing')
@inject('users')
@observer
class App extends Component { ...

我的UserStore:

import { observable, action, computed } from "mobx"

class UserStore {
  @observable users = [];

  @action addUser = (user) => {
    this.users.push(user)
  }

  @computed get userCount () {
    return this.users.length
  }
}

const store = new UserStore();
export default store;

我已尝试通过 Google 查找此错误，但没有返回任何有用的结果.知道我做错了什么吗?

I've tried to Google for this error but it's returning no useful results. Any ideas what I am doing wrong?

推荐答案

如果你使用 Babel 7 安装对装饰器的支持:

If you're using Babel 7 install support for decorators:

npm i -D\
  @babel/plugin-proposal-class-properties\
  @babel/plugin-proposal-decorators

然后在您的 .babelrc 或 webpack.config.js 文件中启用它:

Then enable it in your .babelrc or webpack.config.js file:

{
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose": true}]
    ]
}

请注意，遗留模式很重要(因为将装饰器提案放在首位).非传统模式是 WIP.

Note that the legacy mode is important (as is putting the decorators proposal first). Non-legacy mode is WIP.

参考:https://mobx.js.org/best/decorators.html

这篇关于元素描述符的 .kind 属性必须是“method"或“method".或“字段"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！