React-redux показывает ошибку, пропускающую преобразование свойств класса

Question

Пожалуйста, Stackoverflow Ребята, я знаю, что на этот вопрос ответили здесь, но я не могу заставить его работать на меня handleChange1() показывает ошибка Отсутствует преобразование свойств класса

Ошибка:Преобразование отсутствующих свойств класса

Из вышеупомянутого источника некоторые эксперты Stackoverflow предлагают установить

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

и установить

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

в webpack.configфайл .Я сделал это, но все еще не могу заставить его работать

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});
  }

// код продолжается

здесь 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"
  }
}

Answer 1

Вы должны разместить

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

внутри .babelrc файла , а не в webpack.config .

Это должно выглядеть так:

.babelrc

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

Оформить заказ Вавилонские документы по свойствам класса для получения дополнительной информации.