Проблема с @connect декораторами в react-redux

392

21 апреля 2017, 20:50

для старта react-приложения использую стандартный create-react-app от фейсбука.

Однако, когда пытаюсь применить декоратор @connect из библиотеки react-redux, возникает ошибка

Syntax error: Unexpected token
@connect( state => ({}))
^

Пробовала действовать по инструкции отсюда: babel

вот мой файл .babelrc

{
  "plugins": ["transform-decorators-legacy"]
}

как сделать так, чтобы корректно заработали декораторы? или может быть есть какой-то аналог create-react-app для редакс, чтобы декораторы работали "из коробки"?

Answer 1

За ночь получилось разобраться благодаря вот этой статье: настройка декораторов в babel и quick-fix decorators at create-react-app

npm i -S babel-plugin-transform-decorators-legacy

файл .babelrc

{
  "presets": ["es2015", "react", "stage-1"],
  "plugins": ["transform-decorators-legacy"]
}

в фейсбуковской сборке creaate-react-app сборщик webpack находится внутри node_modules/react-scripts:

node_modules/react-scripts/config/webpack.config.dev.js
node_modules/react-scripts/config/webpack.config.prod.js

дописать необходимые плагины в loaders[]:

{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'babel',
    query: {
      // тут могут быть другие Ваши настройки
      babelrc: false,
      presets: [require.resolve('babel-preset-react-app')],
      cacheDirectory: true,
      // добавляем плагины:
      plugins: [
        'transform-runtime',
        'transform-decorators-legacy',
      ],
    }
  },