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.