无法通过 webpack/babelrc 转译装饰器（高阶组件）

Question

以下是我的配置： 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 的 webpack 部分：

   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 {

....继续..

如果还有什么需要我提供的，请告诉我。 可以肯定的是这里缺少一些小东西，有人可以为我指出吗？

谢谢。

Answer 1

嗯，

import { connect } from 'react-redux';

我从redux 模块而不是react-redux 导入它。

谢谢。