React-redux shows error missing class propertises transform

Question

Please Stackoverflow Guys, I know this question has been answered here but I cannot get it to work for me handleChange1() shows error Missing class properties transform

Error: Missing class properties transform

From the above source Some Stackoverflow Experts suggest Installing

npm install babel-plugin-transform-class-properties --save-dev

and setting

 "plugins": ["transform-class-properties"]

in the webpack.config file. I have done that but still cannot get it to work

import React, { Component } from 'react';
import { render } from 'react-dom';
import Select from 'react-select'
import 'react-select/dist/react-select.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      selectedOption: {},

    };
  }

  handleChange1 = (dataSearch) => {
    this.setState({dataSearch});
  }

//code continues

here is the webpack.config

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'bundle.js'
    },

module:{
  rules: [
    {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
               presets: ['react', 'es2015', 'stage-3'],
               plugins: ["transform-class-properties"]


            }
        },
    {

      test: /\.(s?)css$/,
      use: [
            "style-loader",
            "css-loader",
            "sass-loader"
          ]
      }]
    },



    resolve: {
        extensions: ['*','.js', '.jsx', '.css', '.scss']
    },


    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body'
    })],
    devServer: {
port: 4200,
        historyApiFallback: true

    },
    externals: {
        // global app config object

        config: JSON.stringify({
            apiUrl: 'http://localhost'
        })

    }
}

package.json

{
  "name": "example",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open"
  },
  "dependencies": {
    "history": "^4.6.3",
    "node-sass": "^4.9.4",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "react-select": "^2.1.1",
    "react-toastify": "^4.4.0",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^1.0.1",
    "html-webpack-plugin": "^2.26.0",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2"
  }
}

score 0 · Accepted Answer · answered Nov 08 '18 at 13:29

You have to place

"plugins": ["transform-class-properties"]

inside .babelrc file, not in webpack.config.

It should look like this:

.babelrc

{
  "presets": [...],
  "plugins": [
    [ "transform-class-properties" ]
  ]
}

Checkout Babel docs on class properties for more information.

React-redux shows error missing class propertises transform

1 Answers1