错误：使用 web-pack 时缺少类属性转换

Question

I am using web-pack and flowtype.

The following code result valid in flowtype but when building the application using web-pack I receive the following error:

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

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

10 | olMap: Object;

I have tried to install babel-plugin-transform-class-properties

and making some settings in my .babelrc file but with no success.

I think the issue is related with web-pack. Could you please point me out what is wrong and how to fix it?

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

My 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" },

my .babelrc

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

Answer 1

I was able to fix this issue adding plugins information in both .babelrc and web-pack configuration:

 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" ] }

Answer 2

I think you need another babel plugin as well. transform-flow-strip-types.

In your .babelrc

{

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