title: You may need an appropriate loader to handle this file type - React and Webpack
body: <p>Even though I have already added the babel loader no matter what It just doesnt read JSX syntax. Please any help will be much appreciated! I already id run npm install on both the present-env as well as preset-react.</p>
  
  <p>Webpack.config.js </p>
  
  <p>I have used the webpack config given by Spring documentation with react as shown below. </p>
  
  <pre><code>var path = require('path');
  module.exports = {
      entry: './src/main/js/app.js',
      devtool: 'sourcemaps',
      cache: true,
      mode: 'development',
      output: {
          path: __dirname,
          filename: './src/main/resources/static/built/bundle.js'
      },
      resolve: {
          extensions: ['.js', '.jsx']
        },
      module: {
          rules: [
              {
                  test: path.join(__dirname, '.'),
                  exclude: /node_modules/,
                  use: [{
                      loader: 'babel-loader',
                      options: {
                          presets: ["@babel/preset-env", "@babel/preset-react"],
                          plugins: ["@babel/plugin-proposal-class-properties"]
                      }
                  }]
              },
              {
                  test: /\.css$/,
                  use: [ 'style-loader', 'css-loader' ]
                }
          ]
      }
  };
  </code></pre>
  
  <p>Home.jsx </p>
  
  <pre><code>import React, { Component } from "react";
  import NavBar from "./navbar";
  import Product from "./product";
  import css from "./product.css";
  
  const divStyle = {
    display: "flex",
    flexWrap: "wrap",
    flexDirection: "row",
    justifyContent: "flex-start",
    overFlow: "auto",
    whiteSpace: "nowrap"
  };
  
  const horizontalScroll = {
    display: "inline-block"
  };
  class Home extends Component {
    render() {
      return (
        &lt;div style={divStyle}&gt;
          {this.props.products.map(product =&gt; (
            &lt;Product
              key={product.id}
              onDelete={this.props.onDelete}
              product={product}
              onIncrement={this.props.onIncrement}
            /&gt;
          ))}
        &lt;/div&gt;
      );
    }
  }
  
  export default Home;
  </code></pre>
  
  <p>Error :</p>
  
  <pre><code>[INFO] ERROR in ./src/main/js/app.js
  [INFO] Module not found: Error: Can't resolve 'src/main/resources/templates/index.html' in 'E:\alpha\src\main\js'
  [INFO]  @ ./src/main/js/app.js 42:12-62
  [INFO] 
  [INFO] ERROR in /alpha/src/main/js/home.jsx 21:6
  [INFO] Module parse failed: Unexpected token (21:6)
  [INFO] You may need an appropriate loader to handle this file type.
  [INFO] |   render() {
  [INFO] |     return (
  [INFO] &gt;       &lt;div style={divStyle}&gt;
  [INFO] |         {this.props.products.map(product =&gt; (
  [INFO] |           &lt;Product
  [INFO]  @ ./src/main/js/app.js 40:11-49
  [INFO] 
  [INFO] ERROR in /alpha/src/main/js/navbar.jsx 5:8
  [INFO] Module parse failed: Unexpected token (5:8)
  [INFO] You may need an appropriate loader to handle this file type.
  [INFO] | 
  [INFO] | class NavBar extends Component {
  [INFO] &gt;   state = {
  [INFO] |     cartItems: 0,
  [INFO] |     notifications: 0,
  [INFO]  @ ./src/main/js/app.js 38:13-53
  </code></pre>
  
  <p>The error says that it cant specifically read JSX. I already have the babel-loader. Im not sure what else im supposed to do. Thanks in advance.</p>