title: ReactJS - You May Need an Appropriate Loader Error
body: <p>So I am trying to follow <a href="https://www.youtube.com/watch?v=yA1Lw1U5278" rel="nofollow noreferrer">this</a> tutorial on React (which will later take me through authentication and integration with PostgreSQL). I've noted that his react-router is outdated, and as such used the top comment to remedy that problem. However, after installing the <code>react-router-loader</code> in the <code>webpack.config.js</code> file, I am getting the following error:</p>
  
  <pre><code>ERROR in ./client/index.js
  Module parse failed: /Users/shirazchokshi/react-redux/client/index.js 
  Unexpected token (7:2)
  You may need an appropriate loader to handle this file type.
  | 
  | render((
  |   &lt;Router&gt;
  |     &lt;div&gt;
  |       &lt;Route path="/" component={App} /&gt;
  @ ./client/index.js 11:29-90
  @ multi webpack-hot-middleware/client ./client/index.js
  </code></pre>
  
  <p>Which doesn't make sense because I believe that I have loaded all the proper loaders in the config file. Nonetheless, below are some other files for context:</p>
  
  <p><strong>/client/index.js</strong></p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  import { BrowserRouter as Router, Route, browserHistory } from 'react-router-dom';
  
  import App from './component/App';
  
  render((
    &lt;Router&gt;
      &lt;div&gt;
        &lt;Route path="/" component={App} /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  ), document.getElementById('app'));
  </code></pre>
  
  <p><strong>/client/component/App.js</strong></p>
  
  <pre><code>import React from 'react';
  import NavigationBar from './NavigationBar';
  
  class App extends React.Component{
      render() {
          return(
              &lt;div className="container"&gt;
                  Hello World!
              &lt;/div&gt; 
          );
      }
  
  }
  
  export default App;
  </code></pre>
  
  <p><strong>webpack.config.dev.js</strong></p>
  
  <pre><code>import path from 'path';
  import webpack from 'webpack';
  
  export default {
      devtool:'eval-source-map', 
      entry: [
          'webpack-hot-middleware/client',
          path.join(__dirname, '/client/index.js')
      ],
      output: {
          filename: 'bundle.js',
          path: '/',
          publicPath: '/'
      },
      plugins: [
          new webpack.NoEmitOnErrorsPlugin(),
          new webpack.optimize.OccurrenceOrderPlugin(),
          new webpack.HotModuleReplacementPlugin()
  
      ],  
      module: {
          loaders: [
              {
                  test: /\.js$/,
                  include: path.join(__dirname, 'client'),
                  loaders: ['react-hot-loader', 'babel-loader', 'react-router-loader']
              }   
          ]
      },
      resolve: {
          extensions: [' ', '.js']
      }
  }
  </code></pre>
  
  <p><strong>.babelrc</strong></p>
  
  <pre><code>{
      "presets": ["es2015", "react"]
  }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>  "name": "react-redux",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "server": "nodemon --watch server --exec babel-node -- server/index.js",
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-cli": "^6.24.1",
      "babel-loader": "^7.1.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "nodemon": "^1.11.0",
      "react-bootstrap": "^0.31.1",
      "react-dom": "^15.6.1",
      "react-hot-loader": "^1.3.1",
      "react-router-loader": "^0.5.4",
      "webpack": "^3.4.1",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-hot-middleware": "^2.18.2"
    },
    "dependencies": {
      "express": "^4.15.3",
      "react": "^15.6.1",
      "react-loader": "^2.4.2",
      "react-router": "^4.1.2",
      "react-router-dom": "^4.1.2"
    }
  }
  </code></pre>