reactjs - Module parse failed because of unexpected token

Question

Getting this error when I run webpack -w:

$ webpack -w
asset build/bundle.js 1.06 KiB [compared for emit] (name: app)
./src/App.js 255 bytes [built] [code generated] [1 error]

ERROR in ./src/App.js 7:6
Module parse failed: Unexpected token (7:6)
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 (
>       <div>
|         Cool react App!
|       </div>

webpack 5.11.1 compiled with 1 error in 100 ms

My webpack.config.js looks like this:

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

module.exports = {
  mode: "development",
  entry: {
    app: "./src/App.js"
  },
  output: {
    filename: "build/bundle.js",
    sourceMapFilename: "build/bundle.map"
  },
  devServer: {
    inline: true,
    contentBase: __dirname + "/build",
    port: 3000
  }
}

module: {
  rules: [
    {
      test: /.js$|jsx/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}

My App.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return (
      <div>
        Cool react App!
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

The terminal where the error is pointed seems to have no error syntactically.

Edit 1

As per request, here is my package.json:

{
  "name": "component-lifecycle",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

等待大神答复