Invariant Violation: The root route must render a single element error in react-router 2 dynamic routing

Question

I have simple Hello World App with one route no child route or index route. For routing i using plain routes instead of jsx sysntax. Again i am using react-router's dynamic routing to load Hello component with webpack. My app.jsx file has the following code.

import React from "react";
import ReactDOM from "react-dom";
import {Router, browserHistory} from "react-router";
import Hello from "./components/Hello";



const routes = [{
    path:"/",
    getComponents(location, callback) {
        require.ensure([], function (require) {
            callback(null, require('./components/Hello'))
        })
    }
}];


ReactDOM.render(
    <Router history={browserHistory}  routes={routes}/>,
    document.getElementById("container")
); 

Hello.jsx component has the following code

import React from "react";
export default class Hello extends React.Component {

    render() {

        return (
            <h2>Hello World</h2>
        )
    }
}

Answer 1

This error happens because webpack doesn't support es6 modules

if you are using babel to transpile es6 code then use the default keyword like

require('./components/Hello').default

so the routes will be

const routes = [{
    path:"/",
    getComponents(location, callback) {
        require.ensure([], function (require) {
            callback(null, require('./components/Hello').default)
        })
    }
}];