CODEWITHSUNDEEP
javascriptwebpackwebpack-dev-serverflowtype
GibboK
GibboK

Reputation: 73928

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

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

Upvotes: 1

Views: 2825

Answers (2)

GibboK
GibboK

Reputation: 73928

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

Upvotes: 1

shashi
shashi

Reputation: 4696

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

In your .babelrc

{

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

Upvotes: 0

Related Questions