react component module 'classProperties' isn't currently enabled

Question

getting an error when executing my react module

'classProperties' isn't currently enabled (44:11):

 }
  43 |   // componentDidUpdate or try this
> 44 |   onClick = (e) => {
     |           ^
  45 |     e.preventDefault();
  46 |      const url = `${this.props.url}`;
  47 |      if(this.props.method === "GET"){

Add @babel/plugin-proposal-class-properties ( https://git.io/vb4SL ) to the 'plugins' section of your Babel config to enable transformation.

I tried the solutions still get the error after re building.

Support for the experimental syntax 'classProperties' isn't currently enabled

package.json

{
  "name": "blahmodule",
  "version": "1.0.0",
  "description": "a fetch module for our project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "./node_modules/.bin/babel src --out-file index.js"
  },
  "peerDependencies": {
    "react": "^16.6.6",
    "react-dom": "^16.6.3",
    "axios": "^0.19.0"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "axios": "^0.19.0"
  }
}

.babelrc

I tried changing the .babelrc to babel.config.js with module.exports, but still no success. also with and without "loose": true

{
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
          {
            "loose": true
          }
        ]
      ]
  }

code from the beginning

import React, {Component} from 'react';
import axios from 'axios';

class MyFetch extends Component {
  constructor(props){
    super(props);
    this.state = {
      data:[],
      startTime:'',
      responseTime:''
    }

  }
  componentWillMount(){
   .....
  }
  // componentDidUpdate or try this
  onClick = (e) => {
    e.preventDefault();
     const url = `${this.props.url}`;
     if(this.props.method === "GET"){
        axios.get(url).then( res => {

          this.setState({
            data: res.data
          })
          console.log(this.state.data)
        })
     }
     else if(this.props.method === "POST"){
        axios.get(url).then( res => {
          this.setState({
            data: res.data
          })
          console.log(this.state.data)
        })
     }
  }
  render(){
    return (
      <div>
        {this.props.url ? (
         <button onClick={this.onClick}>Get Response Time</button>
          ):(
              null
          )}

       {this.state.responseTime ? (
         <h3>{this.state.responseTime}</h3>
       ):(
          null
       )}
       </div>
    );
  }
}

export default MyFetch;

Answer 1

Fixed it by adding webpack , i deleted .babelrc because i included in webpack.config.js . Now i guess i have a reason to use webpack in my projects.

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: { 
            presets: ['@babel/preset-env', '@babel/react'],
            plugins:['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  externals: {
    'react': 'commonjs react',
    'reactDOM': 'react-dom'
  },
};

Answer 2

For beginners, the best way to start working on React is to use create-react-app to create a ready to go clean boilerplate. Have a look at the docs and don't waste time configuring things but focus on writing code for your app.

https://github.com/facebook/create-react-app#npm