Невозможно перенести декораторы (компоненты высшего порядка) через webpack / babelrc - PullRequest
Новая
       15

Невозможно перенести декораторы (компоненты высшего порядка) через webpack / babelrc

0 голосов
/ 02 июня 2018

Вот мои конфиги: Package.json: 

     "dependencies": {
    "axios": "^0.18.0",
    "babel-preset-env": "^1.7.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.7.2",
    "prop-types": "^15.6.1",
    "react": "^16.4.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "redux": "^4.0.0",
    "redux-form": "^7.3.0",
    "redux-thunk": "^2.2.0",
    "sass-loader": "^7.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "16.1.0",
    "eslint-plugin-babel": "5.1.0",
    "eslint-plugin-import": "2.12.0",
    "eslint-plugin-jsx-a11y": "6.0.3",
    "eslint-plugin-react": "7.8.2",
    "html-webpack-plugin": "^3.2.0",
    "isomorphic-style-loader": "4.0.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "redux-devtools": "^3.3.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.10.2",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }

.babelrc: 

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["transform-object-rest-spread", "transform-decorators-legacy"]
}

и часть веб-пакета для jsx: 

   module: {
    rules: [{
      test: /\.js$/,
      include: APP_DIR,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['react'],
          plugins: ['transform-decorators-legacy'],
        }
      },
      resolve: { extensions: [".js", ".jsx"] }
    }, {
      test: /\.jsx?$/,
      include: APP_DIR,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['react'],
          plugins: ['transform-decorators-legacy'],
          sourceMap: true,
        }
      },
      resolve: { extensions: [".js", ".jsx"] }
    }
... goes on..

Получаемая ошибка:

product.jsx: 9 Uncaught TypeError: (0, _redux.connect) не является функцией в Object ../src / app / components / product / product.jsx (product.jsx: 9)

HOC используется в моем коде: 

@connect(() => ({}), {
  fetchTimelineData: loadClothingData,
})
class Product extends Component {

.... продолжается ..

Если есть еще что-то, что мне нужно дать, пожалуйста, дайте мне знать.Я вполне уверен, что это что-то маленькое, чего здесь не хватает, может кто-нибудь указать мне, пожалуйста?

Спасибо.

1 Ответ

0 голосов
/ 02 июня 2018

Да, 

import { connect } from 'react-redux';

Я импортировал его из модуля redux, а не из react-redux.

Спасибо.

...