Webpack won't compile - Module build error

I am just setting up my environment for my react.js app and I am facing an error where the webpack refuses to compile. I am getting the error Module build error: SyntaxError: Unexpected token on line 5 . Line 5 - render (<App />, document.getElementById('app'));

. I added <script type="text/babel>"

a script tag to my index.html , but I still get the same error.

Here's my webpack.config.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  entry: [
      'webpack-dev-server/client?http://127.0.0.1:8080/',
      'webpack/hot/only-dev-server',
      './src'
  ],
  output: {
      path: path.join(__dirname, 'public'),
      filename: 'bundle.js'
  },
  resolve: {
      modules: ['node_modules', 'src'],
      extensions: ['.js', '.jsx']
},  
module: {
    rules: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['react-hot-loader', 'babel-loader']
    }
    ]
},

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()

};

      

        
        
        
      

    

My app.js:

import React from 'react';


export default class App extends React.Component {
  render() {
      return (
          <div>
              <h1>My React App</h1>
          </div>

      );
   }
}

      

        
        
        
      

    

And my index.js

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

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

      

        
        
        
      

    

What am I doing wrong?