ReactJS - You May Need an Appropriate Loader Error

Question

So I am trying to follow this 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 react-router-loader in the webpack.config.js file, I am getting the following error:

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((
|   <Router>
|     <div>
|       <Route path="/" component={App} />
@ ./client/index.js 11:29-90
@ multi webpack-hot-middleware/client ./client/index.js

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:

/client/index.js

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((
  <Router>
    <div>
      <Route path="/" component={App} />
    </div>
  </Router>
), document.getElementById('app'));

/client/component/App.js

import React from 'react';
import NavigationBar from './NavigationBar';

class App extends React.Component{
    render() {
        return(
            <div className="container">
                Hello World!
            </div> 
        );
    }

}

export default App;

webpack.config.dev.js

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']
    }
}

.babelrc

{
    "presets": ["es2015", "react"]
}

package.json

  "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\" && 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"
  }
}

Answer 1

From your package.json , I see you are using webpack v3.4.1 . For that you need to make use of module.rules instead of module.loaders like

module: {
        rules: [
            {
                test: /\.js$/,
                include: path.join(__dirname, '/client'),
                use: ['react-hot-loader', 'babel-loader']
            }   
        ]
    },

See the documentation and migration guide

Answer 2

In your /client/index.js, where is the "render" method coming from? Did you already import it from ReactDOM? Also, I think you might have one extra parenthesis in there:

render((