Error: Missing class properties transform on class properties when using web-pack

Question

我正在使用 web-pack 和 flowtype。

以下代码在 flowtype 中有效，但在使用 web-pack 构建应用程序时，我收到以下错误：

ERROR in ./src/map/MapOpenLayer.js Module build failed: SyntaxError: Missing class properties transform.

8 | */ 9 | class MapOpenLayer extends React.Component {

10 | olMap: Object;

我试过安装 babel-plugin-transform-class-properties

并在我的 .babelrc 文件中进行了一些设置，但没有成功。

我认为这个问题与 web-pack 有关。能否请您指出问题所在以及如何解决？

class MapOpenLayer extends React.Component < any, any > {
  olMap: Object;
  state: Object;
  constructor(props: Object) {
    super(props)
    this.olMap = {}
    this.state = {
      activeMapRegion: 'currentLocation',
      activeMapType: 'temperature'
    }
  }
}

我的package.json

"dependencies": {
    "babel": "6.23.0",
    "babel-cli": "6.24.0",
    "babel-preset-flow":"6.23.0",
    "babel-core": "6.24.0",
    "babel-loader": "6.4.1",
    "babel-plugin-recharts": "1.1.0",
    "babel-polyfill": "6.23.0",
    "babel-preset-es2015": "6.24.0",
    "babel-preset-react": "6.23.0",
    "babel-preset-stage-2": "6.24.1",
    "bower": "1.8.0",
    "css-loader": "0.28.1",
    "dot-prop-immutable": "1.3.1",
    "extract-text-webpack-plugin": "2.1.0",
    "file-loader": "0.11.1",
    "flux-standard-action": "1.2.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-redux": "5.0.6",
    "react-router": "4.1.1",
    "react-router-dom": "4.1.1",
    "recharts": "0.22.4",
    "redux": "3.6.0",
    "redux-promise-middleware": "4.2.0",
    "redux-thunk": "2.2.0",
    "moment": "2.18.1",
    "style-loader": "0.17.0",
    "openlayers": "4.1.1",
    "url-loader": "0.5.8",
    "weather-icons": "1.3.2",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.2",
    "babel-plugin-transform-class-properties":"6.24.1"
  },
  "devDependencies": {
    "babel-eslint": "8.0.0",
    "enzyme": "2.9.1",
    "enzyme-to-json": "1.5.1",
    "eslint": "4.7.0",
    "eslint-plugin-react": "6.10.0",
    "jest": "21.1.0",
    "jest-css-modules": "1.1.0",
    "jest-enzyme": "3.8.2",
    "react-addons-test-utils": "15.6.0",
    "react-test-renderer": "15.6.1",
    "redux-mock-store": "1.3.0",
    "redux-test-utils": "0.1.2",
    "sinon": "3.2.1",
    "standard": "10.0.3",
    "jest-cli":"21.1.0",
    "fetch-mock":"5.12.2",
    "flow-bin": "0.55.0",
    "flow-typed":"2.1.5",
    "flow-upgrade":"1.0.3",
    "eslint-config-standard":"10.2.1",
    "eslint-config-standard-flow": "1.0.1",
    "npx":"9.6.0",
    "babel-plugin-transform-class-properties":"6.24.1"
  },

我的.babelrc

{
    "presets": [
        "stage-2",
        "es2015",
        "react",
        "flow"
    ],
    "plugins": [
        "recharts",
        "transform-class-properties"
    ]
}

Answer 1

我想你还需要另一个 babel 插件。转换流带类型。

在你的 .babelrc

{

 "plugins": ["transform-flow-strip-types","transform-class-properties"]
}

Answer 2

我能够解决这个问题，在 .babelrc 和 web-pack 配置中添加插件信息：

  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          plugins: [
            'recharts',
            'transform-flow-strip-types',
            'transform-class-properties'
          ],
          presets: [
            'es2015',
            'stage-0',
            'stage-2'
          ]
        }
      }
    ]
  }

.babelrc

{
    "presets": [
        "es2015",
        "stage-0", 
        "stage-2", 
        "react", 
        "flow" 
    ],
    "plugins": [
        "recharts",
        "transform-flow-strip-types",
        "transform-class-properties"
    ]
}

Error: Missing class properties transform on class properties when using web-pack

Error: Missing class properties transform on class properties when using web-pack

javascript

webpack

flowtype

webpack-dev-server