title: React / Webpack - "Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type."
body: <p>I am trying to build a simple React app using Webpack, however during run time from the Webpack dev server I get the following error:</p>
  
  <pre><code>&gt; ERROR in ./client/components/home.js Module parse failed: Unexpected
  &gt; token (8:3) You may need an appropriate loader to handle this file
  &gt; type. |   render(){ |         return( |           &lt;h1&gt;Hello World!&lt;/h1&gt; |         ) |     } 
  &gt; @ ./client/app.js 13:12-43  @ multi
  &gt; (webpack)-dev-server/client?http://localhost:8080 ./client/app.js
  </code></pre>
  
  <p>Here is my Webpack.config.js file contents:</p>
  
  <pre><code>var path = require('path');
  var debug = process.env.NODE_ENV !== 'production';
  var webpack = require('webpack');
  
  
  module.exports = {
      context: __dirname,
      devtool: debug ? 'inline-sourcemap' : null,
      entry: './client/app.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'app.js'
      },
      module: {
          loaders: [{
              test: /\.js?$/,
              exclude: /(node_modules|bower_components)/,
              include: [path.resolve(__dirname, 'client/app.js')],
              loader: 'babel-loader',
              query: {
                  presets: ['react', 'es2015', 'stage-3'],
                  plugins: ['transform-react-jsx']
              }
          }, {
              test: /\.scss$/,
              include: [path.resolve(__dirname, 'sass/style.scss')],
              loaders: ['style-loader' ,'css-loader' ,'sass-loader']
          }]
      },
      plugins: debug ? [] : [
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.optimize.UglifyJsPlugin({
              mangle: false,
              sourcemap: false
          }),
      ],
  };
  </code></pre>
  
  <p>app.js file contents
  import React from 'react'
  import ReactDOM from 'react-dom'
  import { Switch, BrowserRouter, Route } from 'react-router-dom'
  import Home from './components/home.js'</p>
  
  <pre><code>ReactDOM.render((
       &lt;BrowserRouter&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/" component={Home}/&gt;
          &lt;/Switch&gt;
       &lt;/BrowserRouter&gt;
       ),
       document.getElementById('app')
  )
  </code></pre>
  
  <p>And below is my folder structure as follows:
  <a href="https://i.stack.imgur.com/jaYYE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jaYYE.png" alt="enter image description here"></a></p>