React: You may need an appropriate loader to handle this file
<p>Hi I am getting the following error and what every I tried I could find what in my setting is wrong (Using react sample from <a href="https://github.com/coryhouse/react-slingshot" rel="nofollow">https://github.com/coryhouse/react-slingshot</a>) my Error:</p>

<pre><code>ERROR in ./src/index.js
Module parse failed: c:\temp\react-slingshot\src\index.js Unexpected token (13:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:2)
    at Parser.pp.raise (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:920:13)
    at Parser.pp.unexpected (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:1483:8)
    at Parser.pp.parseExprAtom (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:330:12)
    at Parser.pp.parseExprSubscripts (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:225:19)
    at Parser.pp.parseMaybeUnary (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:204:17)
    at Parser.pp.parseExprOps (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:151:19)
    at Parser.pp.parseMaybeConditional (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
    at Parser.pp.parseMaybeAssign (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
    at Parser.pp.parseExprList (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
    at Parser.pp.parseSubscripts (C:\temp\react-slingshot\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)
 @ multi main
</code></pre>

<p>My WebPack config:</p>

<pre><code>resolved by Chrome when they're parsed from a dynamically loaded CSS blob. Note: Only necessary in Dev.
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.DefinePlugin(GLOBALS), // Tells React to build in prod mode. https://facebook.github.io/react/downloads.htmlnew webpack.HotModuleReplacementPlugin());
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel'],query: {
          presets: ['es2015']
        }},
      {test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
      {test: /\.(woff|woff2)$/, loader: 'file-loader?prefix=font/&amp;limit=5000'},
      {test: /\.ttf(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&amp;mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+.\d+.\d+)?$/, loader: 'file-loader?limit=10000&amp;mimetype=image/svg+xml'},
      {test: /\.(jpe?g|png|gif)$/i, loaders: ['file']},
      {test: /\.ico$/, loader: 'file-loader?name=[name].[ext]'},
      {test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
    ]
  }
};
</code></pre>

<p>My package.json</p>

<pre><code>...
  "devDependencies": {
    "babel-cli": "6.8.0",
    "babel-core": "^6.7.*",
    "babel-loader": "^6.2.*",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "^6.6.*",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-1": "6.5.0",
    "babel-register": "6.8.0",
    "browser-sync": "2.12.5",
   ...
    "webpack": "^1.12.*",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
</code></pre>

<p>My Code index.js:</p>

<pre><code>import React from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import configureStore from './store/configureStore';
require('./favicon.ico'); // Tell webpack to load favicon.ico
import './styles/styles.scss'; // Yep, that's right. You can import SASS/CSS files too! Webpack will run the associated loader and plug this into the page.

const store = configureStore();

render(
  &lt;Provider store={store}&gt;
    &lt;Router history={browserHistory} routes={routes} /&gt;
  &lt;/Provider&gt;, document.getElementById('app')
);
</code></pre>