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未捕获的TypeError：（0，_ redux.connect）不是功能 at 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导入的。

感谢。

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

1 个答案: