gistfile1.txt

//App.js

var React = require('react');
var CSSModules = require('react-css-modules');
var ReactRouter = require('react-router-dom');
var Router = ReactRouter.BrowserRouter;
var Route = ReactRouter.Route;
import styles from '../../../../sass/layout/_layout.scss';
var Index = require('../pages/Index');
var SideBar = require('../component/SideBar');

class App extends React.Component {

    render () {
        return (
            <Router>
                <div className="default-neat-grid ">
                    <div className="row-fluid">
                        <SideBar />
                        <div className="span10">
                            <Route path="/" component={Index} />
                        </div>
                    </div>
                </div>
            </Router>
        );
    };
}

export default CSSModules(App, styles);


//Browser Error:

bundled.js:302 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at invariant (bundled.js:302)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (bundled.js:10565)
    at ReactCompositeComponentWrapper.performInitialMount (bundled.js:21080)
    at ReactCompositeComponentWrapper.mountComponent (bundled.js:20971)
    at Object.mountComponent (bundled.js:3024)
    at mountComponentIntoNode (bundled.js:11306)
    at ReactReconcileTransaction.perform (bundled.js:4471)
    at batchedMountComponentIntoNode (bundled.js:11328)
    at ReactDefaultBatchingStrategyTransaction.perform (bundled.js:4471)
    at Object.batchedUpdates (bundled.js:22577)
invariant @ bundled.js:302
instantiateReactComponent @ bundled.js:10565
performInitialMount @ bundled.js:21080
mountComponent @ bundled.js:20971
mountComponent @ bundled.js:3024
mountComponentIntoNode @ bundled.js:11306
perform @ bundled.js:4471
batchedMountComponentIntoNode @ bundled.js:11328
perform @ bundled.js:4471
batchedUpdates @ bundled.js:22577
batchedUpdates @ bundled.js:1550
_renderNewRootComponent @ bundled.js:11521
_renderSubtreeIntoContainer @ bundled.js:11603
render @ bundled.js:11624
(anonymous) @ bundled.js:13231
__webpack_require__ @ bundled.js:20
module.exports @ bundled.js:63
(anonymous) @ bundled.js:66


// Webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry : __dirname + '/app/index.js',
    module : {
    	loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.scss$/,
                loaders: [
                	'style-loader',
                    'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                    'resolve-url-loader',
                    'sass-loader'
                ]
            }
           
        ]
    },
    output: {
        filename : 'bundled.js',
        path : __dirname + '/build'
    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 200
    },
    plugins: [
    	new ExtractTextPlugin({
    		  filename: 'app.css',
    		  allChunks: true
    		})
    ]
};