My first time using react, so apologies if I'm doing something obvious and incredibly wrong. That said, I've read up on several similar-seeming bugs on here and on github and I can't find anything that works for mine. Here's the full error message:

ERROR in ./src/frontend/src/components/App.js 6:15

Module parse failed: Unexpected token (6:15)

You may need an appropriate loader to handle this file type.

| class App extends Component{

|     render() {

>         return <h1>React App</h1>

|     }

| }

 @ ./src/frontend/src/index.js 1:0-35

The full code from which that error message was drawn:

import React, { Component } from 'react';

import ReactDOM from 'react-dom';



class App extends Component{

    render() {

        return <h1>React App</h1>

    }

}



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

I feel like something is wrong with my webpack-config.js, but I copied that directly from a tutorial I was using so I'm not sure why it would be wrong. Here it is, for reference:

module.exports = {

  module: {

    rules: [

      {

        test: /.js$/,

        exclude: /node_modules/,

        use: {

          loader: "babel-loader"

        }

      }

    ]

  }

}

And here are my package dependencies from package.json:

"dependencies": {

    "prop-types": "^15.7.2",

    "react": "^16.13.1",

    "react-dom": "^16.13.1"

  },

And finally my .babelrc

{

    "presets": ["@babel/preset-env","@babel/preset-react"],

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

}

I really have no idea what's going on, so any help would be much appreciated. Please let me know if I left out any relevant info that could be helpful. Thank you.