title: Webpack + React: Module parse failed: Unexpected token: You may need an appropriate loader
body: <p>Stuck with simple ReactJs + Webpack structure initialization. Not sure where I missed but it should be something very silly.</p>
  
  <p>Can someone please spot where is the error or what I am doing wrong? </p>
  
  <p>Simple ReactJs Code: <code>index.js</code></p>
  
  <pre><code>import React from "react";
  import render from "react-dom";
  
  class App extends React.Component {
      render() {
          return &lt;p&gt;hello world&lt;/p&gt;;
      }
  }
  
  render(&lt;App /&gt;, window.document.getElementById('app'));
  </code></pre>
  
  <p><strong>Webpack Config</strong></p>
  
  <pre><code>import ExtraneousFileCleanupPlugin from 'webpack-extraneous-file-cleanup-plugin';
  
  import manifestPlugin from 'webpack-manifest-plugin';
  import CleanWebpackPlugin from 'clean-webpack-plugin';
  import webpack from 'webpack';
  import path from 'path';
  
  let pathsToClean = [   
      'sp/common/css/*.css',
      'sp/common/js/*.js',
  ];
  
  // the clean options to use
  let cleanOptions = {
      root:     path.resolve( __dirname, '../public'),
      exclude:  [],
      verbose:  false,
      dry:      false
  };
  
  module.exports = {
  
      entry: {
          'common/js/index' : [
              './src/js/index.jsx',
          ],
          'common/js/vendor': [
              'react', 'react-dom', 'react-router','axios',
              'redux', 'react-redux', 'redux-logger', 'redux-thunk', 'redux-promise-middleware'
          ],
      },
      output: {
          path: path.resolve(__dirname, '../public/'),
          filename: 'sp/[name].[chunkhash].js'
      },
      module: {
          rules: [
              {
  
                  test: /\.js?$/,
                  include: path.resolve(__dirname, './src/js'),
                  exclude: [
                      path.resolve(__dirname, './build/'),
                      path.resolve(__dirname, './node_modules/'),
                  ],
                  loader: 'babel',
                  options:{
                      babelrc: false,
                      presets: ['env', 'es2015', 'react', 'stage-2'],
                  },
              },
              {
                  enforce: "pre",
                  test: /\.js?$/,
                  include: path.resolve(__dirname, '/../src/js'),
                  exclude: [
                      path.resolve(__dirname, '/../build/'),
                      path.resolve(__dirname, '/../node_modules/'),
                  ],
                  loader: 'eslint-loader',
              },    
          ],
      },
  
      plugins: [
  
          new webpack.optimize.CommonsChunkPlugin({
              name: "common/js/common",
              filename: "/sp/common/js/common.[chunkhash].js"
          }),
          new ExtraneousFileCleanupPlugin({
              extensions: ['.js'],
              minBytes: 1000,
              manifestJsonName: '/public/sp.manifest.json',
              paths: [
                  'sp/common/css',
                  'sp/common/js',
              ]
          }),
          new manifestPlugin({
              'options': {
                  writeToFileEmit: true,
              },
              fileName: 'sp.manifest.json',
          }),
          new CleanWebpackPlugin(pathsToClean, cleanOptions), // clean the folders after generating new file
      ],
  
  };
  </code></pre>
  
  <p><strong>Error</strong>:</p>
  
  <pre><code>RROR in ./src/js/index.js
  Module parse failed: Unexpected token (13:15)
  You may need an appropriate loader to handle this file type.
  | class App extends React.Component {
  |     render() {
  |         return &lt;p&gt;hello world&lt;/p&gt;;
  |     }
  | }
   @ multi ./src/js/index.js
  </code></pre>
  
  <p>Webpack Version: <code>3.10</code>
  React Version: <code>16.2</code>
  React-dom: <code>16.2</code></p>