Adding State to my React setup causes "./src/Main.js Module build failed"

Question

I'm trying to make a simple React app with a few Button components.

I expect to be able to add state to my app without error. But the moment I add state to my app, I get the following error in my console:

SyntaxError: C:\Users\Roland\React_apps\calculator-project\src\Main.js: Support for the experimental syntax 'classProperties' isn't currently enabled (4:8):

[0m [90m 2 | [39m[0m
[0m [90m 3 | [39m[36mclass[39m [33mMain[39m [36mextends[39m [33mComponent[39m {[0m
[0m[31m[1m>[22m[39m[90m 4 | [39m    state [33m=[39m {[0m
[0m [90m   | [39m         [31m[1m^[22m[39m[0m
[0m [90m 5 | [39m       display[33m:[39m [32m"0"[39m[33m,[39m[0m
[0m [90m 6 | [39m       equation[33m:[39m [32m""[39m[0m
[0m [90m 7 | [39m   }[33m;[39m[0m

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

I've tried running npm i @babel/plugin-proposal-class-properties --save-dev to install the suggested package but it didn't change anything. I also went into .babelrc and added:

{
    "plugins": [
        "babel/plugin-proposal-class-properties"
    ]
}

Also yielded no result.

I know from checking other threads that I should post my package.json :

{
  "name": "calculator-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --hot --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.7",
    "@babel/preset-react": "^7.7.4",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.4.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "style-loader": "^1.1.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

And webpack.config.js :

const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

I tried remaking the app using Create React App (as opposed to my current setup which is custom), and the error did not appear there. While I don't really need this solved, I am curious what is wrong.

Anyone got a minute to explain?

edit: Here is main.js acting the part of app.js :

import React, { Component } from "react";

class Main extends Component {
    state = {
        display: "0",
        equation: ""
    };

    inputNum(e) {
        console.log(e.target.value);
    }

    render() {
        return (
            <div>
                <Button
                    value="/"
                    display="/"
                    class="button col-4 row-1"
                    // click={this.inputNum}
                >
                    /
                </Button>
                // ... more buttons ...
                <Button
                    value="."
                    display="."
                    class="button col-3 row-5"
                    click={this.inputNum}
                >
                    .
                </Button>
            </div>
        );
    }
}

const Button = props => (
    <button
        type="button"
        id={props.id}
        value={props.value}
        className={props.class}
        onClick={props.click}
    >
        {props.display}
    </button>
);

export default Main;

Answer 1

Possibly just a typo in your .babelrc , I think the @ is required.

{
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}