Why won't Babel connect?

Question

webpack

I have no idea what is wrong

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: "/node_modules/",
        use: {
            loader: "babel-loader",
        },
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
  ],
};

app.js

import React, { Component } from "react";
import { render } from "react-dom";

export default class App extends Component {
    constructor(props) {
        super(props);

    }

    render() {
        return (<h1>Testing React Code</h1>);
    }
}

const appDiv = document.getElementById("app");
render(<App />, appDiv);

Error

> [email protected] dev C:\Users\Administrator\PycharmProjects\pythonProject2\webProject\frontend
> webpack --mode development --watch

asset main.js 4.71 KiB [compared for emit] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 370 bytes
./src/index.js 37 bytes [built] [code generated]
./src/components/App.js 333 bytes [built] [code generated] [1 error]

ERROR in ./src /components/App.js 11:15
Module parse failed: Unexpected token (11:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| render() {
> return Testing React Code;
| }
| }
@ ./src/index.js 1:

0-35 webpack 5.64.0 compiled with 1 error in 201 ms

Babel.config.json

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

Answer 1

Please somebody