Компонент реакции компиляции неожиданного токена Babel

Я пытаюсь скомпилировать следующий код с помощью babel, но он дает мне «неожиданный токен» на символе «=» в следующей строке:

состояние = {};

Версия Babel: 6.24.1 (babel-core 6.25.0)

Код:

import {Button, Menu} from 'semantic-ui-react';

class AppBar extends Component {
    state = {};

    handleItemClick = (e, { name }) => this.setState({ activeItem: name });

    render() {
        const { activeItem } = this.state;

        return (
            <Menu>
                <Menu.Item
                    name='dashboard'
                    active={activeItem === 'dashboard'}
                    onClick={this.handleItemClick}
                >
                    Dashboard
                </Menu.Item>

                <Menu.Item
                    name='contacts'
                    active={activeItem === 'contacts'}
                    onClick={this.handleItemClick}
                >
                    Contact Lists
                </Menu.Item>

                <Menu.Item
                    name='messages'
                    active={activeItem === 'messages'}
                    onClick={this.handleItemClick}
                >
                    Messages
                </Menu.Item>
            </Menu>
        )
    }
}

ReactDOM.render(
  <AppBar/>,
  document.getElementById('root')
);

Я использую es2015 и реагирую на предустановки.

В чем проблема? Спасибо.


reactjs babeljs semantic-ui-react ecmascript-6
person SrgHartman    schedule 13.07.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Добавьте в проект пакет babel-plugin-transform-class-properties.

person Knut Herrmann    schedule 13.07.2017

arrow_upward
3
arrow_downward

В настоящее время я использую эти модули babel (в package.json) для нашего приложения React:

"babel-cli": "~6.24.1",
"babel-core": "~6.25.0",
"babel-eslint": "~7.2.3",
"babel-loader": "~7.1.0",
"babel-plugin-add-module-exports": "~0.2.1",
"babel-plugin-istanbul": "^4.1.3",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "~6.24.1",
"babel-preset-es2015": "~6.24.1",
"babel-preset-react": "~6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-register": "~6.24.1",
"babel-runtime": "~6.23.0",

И в корневой папке есть .bablerc:

{
  "presets": [
    "es2015", "react", "stage-3"
  ],
  "plugins": ["transform-class-properties", "add-module-exports","syntax-dynamic-import"],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    },
    "coverage": {
      "plugins": ["istanbul"]
    }
  }
}

И я определяю state, используя тот же код

export class AttributeModelListContainer extends React.Component {

  static propTypes = {
    // from router
    params: PropTypes.shape({
      project: PropTypes.string,
    }),
    // from mapStateToProps
    [...]
  }

  state = {
    isLoading: true,
  }
}
person Ser    schedule 13.07.2017

arrow_upward
0
arrow_downward

Убедитесь, что вы установили все необходимые пресеты babel:

yarn add babel-loader babel-core --dev
yarn add babel-polyfill --dev
yarn add babel-preset-es2015 --dev
yarn add babel-preset-stage-2 --dev
yarn add babel-preset-react --dev

И для babel предустановлено значение .babelrc в следующем порядке:

{
  "presets": ["es2015", "react", "stage-2"]
}

Включите этап-2, чтобы иметь достаточно новых функций, необходимых для вашей разработки.

person Ben    schedule 13.07.2017